個人 Vue.js 學習日記 （十三） - vue-router

上節回顧

一個月的期限立刻要到了，真是彈指一瞬間的匆匆...
上節主要記錄了我從子組件修改父組件傳遞過來的prop值得一個思路過程
因爲近期對於權限控制方面有必定的需求，因此去了解了一下vuex與vue-router，那麼今天就來總結一下關於vue-router的一些已有的認識，而且有時間的話進行一下系統的學習

本節目標

總結vue-router基於vue-cli項目的安裝及簡單使用

1.安裝

npm install vue-router

2.目錄

一般來講路由都存放在一個單獨的.js文件，路徑以下：

src - router - index.js

個人index.js現有代碼以下：

import Vue from 'vue'
import Router from 'vue-router'
import Frame from '@/components/frame'
import StudentList from '@/components/student/student-list'
import StudentAdd from '@/components/student/student-add'
import DemoSlot from '@/components/demo/demo-slot'
import DemoPage from '@/components/demo/demo-page'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Frame,
      children: [
        {
          path: '/student/list',
          component: StudentList
        },
        {
          path: '/student/add',
          component: StudentAdd
        },
        {
          path: '/demo/slot',
          component: DemoSlot
        },
        {
          path: '/demo/page',
          component: DemoPage
        }
      ]
    }
  ]
})

3.引入

路由建立好了，那麼接着就應該將整理好的路由與項目關聯起來啦

只有兩個操做點：

1. import進來
2. 掛在vue實例上

咱們打開src - main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.使用

如今，凡是在路由組件中配置過的路由記錄，如今均可以被導航啦

注：沒有配置過的路由記錄是不能夠被導航的

4-1.路由基礎用法：

1.<router-link to="/student/list" tag="div">學員列表</router-link>

意思是經過路由導航到/student/list記錄點，to設置目標路由記錄點，tag="div"表示router-link最終會呈現爲一個div元素

經過向根實例傳入router實例，router會注入到每一個組件中，能夠經過：this.$router在各個組件當中獲取router的實例

2.

例如：

this.$router.push()進行編程式導航

this.$router.go()前進後退等

5.hash與history

簡單來理解的話：

hash：url中帶有#，而且只修改#以後的url，默認狀況下vue-router是hash模式

history：url中不帶#，使用history.pushState完成跳轉而且須要後臺配合使用，使用history模式須要顯式指定

不過二者的跳轉都不會使頁面從新加載

6.守衛

6.1.種類

守衛總共分爲：全局守衛、路由守衛、組件守衛三種

意思就是分三個區域，全局區域，路由區域，組件區域，很明顯是做用域不一樣

全局守衛分3個：前置beforeEach、後置afterEach、解析beforeResolve

路由獨享守衛：進入前beforeEnter

組件守衛：進入（組件對應）路由前beforeRouteEnter、路由改變前（組件複用時）beforeRouteUpdate 、離開（組件對應）路由前beforeRouteLeave

守衛執行順序：導航解析流程

附一張我本身的理解：

注：帶有next的守衛必定要調用next()

6.2.應用場景

前些天在作權限時經過查找資料，最終發現經過全局前置守衛，能夠實現一些權限控制的功能，固然他並不能獨立完成須要配合vuex來使用

7.meta 路由元數據

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

注：meta頗有用的，例如咱們能夠經過爲路由記錄添加meta信息來表明該路由所表明的功能模塊代碼，在addRoutes時判斷是否有權限加載此路由記錄

8.路由懶加載

因爲咱們使用的是SPA的方式開發網頁，那麼有一個龐大的js文件是可想而知的

路由懶加載便是爲了下降沒必要要的開銷，在路由被訪問時才真正的去加載它

用法：

const Foo = () => import('./Foo.vue')

只修改了引入方式，使用方式並無改變

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

9.addRoutes 動態添加路由

用法：

假設咱們有以下路由：

var router = new Router({
  routes: [
    {
      path: '/',
      component: Frame,
      ]
    }
  ]
})

而且有以下數組：

var routes = [{
      path: '/index',
      name: '首頁',
      component: 組件,
      children: [{
        path: 'page1',
        component: 組件1
      }, {
        path: 'page2',
        component: 組件2
      }]

那麼能夠：

router.addRoutes(routes)

以後就能夠成功的導航到新增的三個路由記錄啦