首先理清一下幾個路由的基礎概念： 1）route是一條路由，也就是映射，即A按鈕→A內容，以數組形式存儲 2）toutes:[]是一組路由，裡面包含了若幹條route，即route[{A按鈕→A內容}，{B按鈕→B內容}] 3）router是管理機制，負責處理和查找路由請求 const 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>//給路由一個渲染的出口
