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/>是路由出口，路由匹配到的組件將渲染在這裏。

二、文件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的其它參數。(具體須要分析源碼，在此再也不過多解釋)
2、動態路由
什麼是動態路由？動態路由是指路由器可以自動的創建本身的路由表，而且可以根據實際狀況的變化實時地進行調整。
一、在vue項目中，使用vue-router若是進行不傳遞參數的路由模式，則稱爲靜態路由；若是可以傳遞參數，對應的路由數量是不肯定的，此時的路由稱爲動態路由。動態路由，是以冒號爲開頭的(:)，例子以下：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      name: 'RouterComponents',
      component: RouterComponents
    }
  ]
})

二、路由跳轉，執行方式有兩大類；
第一大類：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}`,
      })
    }
}

3、嵌套路由
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
        },
      ]
    }
  ]
})