目錄

• 1.建立一個-cli預設專案(僅包含babel)
• 2.進入建立檔案
• 3.檢查配置
• 4.建立views資料夾
• 5.設定APP.vue
• 6.進行main.的配置
• 7.執行結果

問題描述：

vue-router是前端開發中用來實現路由頁面跳轉的一個模組。下面小編將帶來如何在已經建立好的vue-router專案基礎下www.cppcns.com實現頁面跳轉。

實驗結果與討論 ：

1.建立一個vue-cli預設專案(僅包含babel)

2.進入建立檔案

以管理員身份進入建立的檔案路徑內，並執行命令npm install vue-router –save

（如果已經安裝好淘寶映象可執行cnpm install vue-router–save）

3.檢查配置

在package.json裡可以進行檢查到是否已經成功配置vue-routhttp://www.cppcns.comer。

4.建立views資料夾

新建一個views資料夾，並在該資料夾下新建home.vue,about.vue兩個元件

5.設定APP.vue

如下設定：

<template>

<div id="app">

<div id="nav">

<router-link to="/">home</router-link> |

<router-link to="/about">about</router-link>

</div>

<router-view/>

</div>

</template>

<style>

#app {

text-align: center;

margin-top: 60px;

}
 


</style>

6.進行main.js的配置

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/HomwzIPnhe.vue'

Vue.use(Router)

export default new Router({

mode: 'history',base: process.env.BASE_URL,routes: [

{

path: '/',name: 'home',component: Home

},{

path: '/about',name: 'about',component: () => import( './views/About.vue')

}

]

})

7.執行結果

如下：

問題 總結 ：

在本次的實驗中，通過cmd命令提示符中安裝vue-router，並配置router.js實現頁面跳轉功能。雖然已經成功實現簡單的頁面跳轉功能，但是並未將router.j客棧s中的定義路由、定義元件等闡述清楚，後續將進行研究頁面跳轉功能。

到此這篇關於vue專案實現頁面跳轉的方法的文章就介紹到這了,更多相關vue專案實現頁面跳轉內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！