vue配置vue-router

首先理清一下幾個路由的基礎概念：

1）route是一條路由，也就是映射，即A按鈕→A內容，以數組形式存儲

2）toutes:[]是一組路由，裏面包含了若干條route，即route[{A按鈕→A內容}，{B按鈕→B內容}]

3）router是管理機制，負責處理和查找路由請求

const router = new VueRouter（{

routes

}）

 

配置路由的步驟以下：

1.安裝vue-router,在npm中輸入 npm install vue-router,安裝成功後在main.js同級目錄下會出現router文件夾

2.在router文件夾下的index.js裏面配置路由的相關信息：

　　import Vue from 'vue' import VueRouter from 'vue-router'

　　import xx from 'xxx'

　　Vue.use(Router)

　　export default new Router({

　　routes:[

　　{

　　path:'/',　　//必填，表示跳轉的一條route路徑，/表示首頁的路徑。

　　name:'index', 　　//選填，爲組件的名稱，爲了便於區分建議填寫

　　component:HellloFromVux　　//必填，指定了須要跳轉的組件

　　}，{

　　　　…

　　}

　　]

})

 

3.在組件內給vue-router配置一個渲染路由的出口，

<router-link to='目標組件所在路徑（不用加文件名）'>

<div></div>//此處寫組件在本頁的顯示樣式，至關於a標籤樣式

</router-link>

<router-view></router>//給路由一個渲染的出口