vue路由篇(動態路由、路由巢狀)
什麼是路由？網路原理中，路由指的是根據上一介面的資料包中的IP地址，查詢路由錶轉發到另一個介面，它決定的是一個端到端的網路路徑。
web中，路由的概念也是類似，根據URL來將請求分配到指定的一個'端'。(即根據網址找到能處理這個URL的程式或模組)
使用vue.js構建專案，vue.js本身就可以通過組合元件來組成應用程式；當引入vue-router後，我們需要處理的是將元件(components)對映到路由(routes)，然後在需要的地方進行使用渲染。
一、基礎路由
1、建立vue專案，執行vue init webpack projectName命令，預設安裝vue-router。專案建立後，在主元件App.vue中的HTML部分：
<template> <div id="app"> <router-view/> </div> </template>
上述程式碼中，<router-view/>是路由出口，路由匹配到的元件將渲染在這裡。
2、檔案router/index.js中：
import Vue from 'vue' // 匯入vue外掛
import Router from 'vue-router' // 匯入vue-router
import HelloWorld from '@/components/HelloWorld' // 匯入HelloWorld元件
Vue.use(Router) // 引入vue-router
export default new Router({
routes: [
{
path: '/', // 匹配路由的根路徑
name: 'HelloWorld',
component: HelloWorld
}
]
})
以上程式碼比較簡單，一般的匯入、引用操作，其中Vue.use()具體什麼作用？
個人理解：Vue.use(plugin, arguments)就是執行一個plugin函式，或執行plugin的install方法進行外掛註冊(如果plugin是一個函式，則執行；若是一個外掛，則執行plugin的install方法... )；並向plugin或其install方法傳入Vue物件作為第一個引數；如果有多個引數，use的其它引數作為plugin或install的其它引數。(具體需要分析原始碼，在此不再過多解釋)
二、動態路由
什麼是動態路由？動態路由是指路由器能夠自動的建立自己的路由表，並且能夠根據實際情況的變化實時地進行調整。
1、在vue專案中，使用vue-router如果進行不傳遞引數的路由模式，則稱為靜態路由；如果能夠傳遞引數，對應的路由數量是不確定的，此時的路由稱為動態路由。動態路由，是以冒號為開頭的(:)，例子如下：
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
name: 'RouterComponents',
component: RouterComponents
}
]
})
2、路由跳轉，執行方式有兩大類；
第一大類：router-link模式，直接把引數寫在to屬性裡面：
<router-link :to="{name:'RouterComponents',params:{id:110}}">跳轉</router-link>
第二大類：$router.push()模式，程式碼如下：
methods: {
changeFuc (val) {
this.$router.push({
name: 'RouterComponents',
params: {id: val}
})
}
}
或者：
methods: {
changeFuc (val) {
this.$router.push({
path: `/RouterComponents/${val}`,
})
}
}
三、巢狀路由
vue專案中，介面通常由多個巢狀的元件構成；同理，URL中的動態路由也可以按照某種結構對應巢狀的各層元件：
export default new Router({
routes: [
{
path: '/', // 根路由
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
component: RouterComponents,
children: [
{
path: '', // 預設路由
name: 'ComponentA', // 當匹配上RouterComponents後，預設展示在<router-view>中
component: ComponentA
},
{
path: '/ComponentB',
name: 'ComponentB',
component: ComponentB
},
]
}
]
})