路由的三個基本概念

1. route，它是一條路由，由這個英文單詞也可以看出來，它是單數(shù)。
2. routes 是一組路由，就是把每一條路由組合起來，形成一個數(shù)組。
3. router 是一個機制，相當(dāng)于一個管理者，它來管理路由。

下面來簡單使用一下
下載vue-router庫：npm install vue-router
創(chuàng)建一個router文件夾，在里面創(chuàng)建一個index.js文件，專門來配置路由的相關(guān)信息的文件
導(dǎo)入路由并使用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

創(chuàng)建一個pages文件夾，創(chuàng)建Home.vue和News.vue頁面
Home.vue頁面

<template>
<div>
    <h1>首頁</h1>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
<style scoped lang='scss'>
</style>

News.vue頁面

<template>
<div>
    <h1>新聞</h1>
</div>
</template>
<script>
export default {
name:'News'
}
</script>
<style scoped lang='scss'>
</style>

在index.js中導(dǎo)入這兩個頁面

import Home from '../pages/Home.vue'
import List from '../pages/News.vue'

index.js中創(chuàng)建路由器對象，一條路由信息就是一個對象

export default new VueRouter({
  routes:[
    {
      // 路由路徑
      path:'/home',
      // 路由名稱
      name:'home',
      // 路由組件
      component:Home
    },
    {
      path:'/news',
      name:'news',
      component:News
    }
  ]

這樣一個路由器相關(guān)準備就完成了，然后在main.js文件中導(dǎo)入路由器對象,并將路由器對象傳給Vue實例

import router from './router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

在App.vue中來跳轉(zhuǎn)路由
router-link是路由鏈接組件，用于跳轉(zhuǎn)

 <router-link to="/home">首頁</router-link>&nbsp;

也可以用編程式路由來跳轉(zhuǎn)

<button @click="gotoNews">新聞</button>

router-view是路由視圖組件，用于呈現(xiàn)路由頁面 ，必須要添加，如果不用的話，就無法顯示要跳轉(zhuǎn)的路由頁面

<router-view></router-view>

在Vue實例中添加一個方法，這樣做的好處就是可以在挑戰(zhàn)之前做各種驗證， $route返回的是當(dāng)前路由信息,router返回的是當(dāng)前vue實例里面的路由器對象,push方法是跳轉(zhuǎn)路由，并將路由地址添加到歷史記錄，當(dāng)然也可以用replace方法，它是把當(dāng)前地址替換成記錄里面的最近一條地址

 gotoNews(){
      if(this.$route.path!=='/news'){
        this.$router.push('/news')
      }
    }

之后就可以使用路由來跳轉(zhuǎn)頁面了

在配置路由信息中
路由重定向redirect:后面寫的是要跳轉(zhuǎn)的地址

 redirect:'/home' 

路由傳參props:參數(shù)設(shè)置為true時，表示可接收路由屬性參數(shù)

 props:true,

當(dāng)要配置路由元信息時:meta可配置該頁面標(biāo)題和設(shè)置角色權(quán)限等

 meta:{
      title:'One',
      roles:['admin']
    },

二級路由，就是在路由信息中配置子路由信息,例如：

 {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定義one的二級路由
    children:[
      {
        path:'nj',
        name:'nj',
        component:()=>import('../views/city/Nj.vue'),
        meta:{
          title:'二級路由'
        }
      },
      {
        path:'sz',
        name:'sz',
        component:()=>import('../views/city/Sz.vue'),
        meta:{
          title:'二級路由'
        }
      }
    ]
  },

路由懶加載:提高首屏加載性能

component: ()=>import('@v/Home.vue'),

配置路由模式：1.hash模式 2.history模式
hash模式，使用的是錨鏈接的原理實現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點是路徑帶有#號，不夠美觀。
history模式，使用的是瀏覽器中內(nèi)置的history對象實現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器，刷新后會丟失路由信息。

路由前置守衛(wèi)

router.beforeEach((to,from,next)=>{
  //獲取瀏覽器的緩存中，保存的當(dāng)前登錄用戶的權(quán)限
  let role = sessionStorage.getItem('role')
  //驗證用戶訪問權(quán)限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表示繼續(xù)向下執(zhí)行
    next()
  }

路由后置守衛(wèi)

router.afterEach((to,from)=>{
  // 配置當(dāng)前頁的標(biāo)題
  document.title = to.meta.title
})

路由緩存
<keep-alive></keep-alive>組件是用來緩存路由組件的，在默認情況下會緩存打開所有組件。用法：

<keep-alive :include="['newsGn','newsGj']">
    <router-view></router-view> 
</keep-alive>

:include是用來指定緩存指定的頁面名

路由的兩個特有的生命周期
1.激活狀態(tài)activated():打開這個組件頁面
2.失活狀態(tài)deactivated()：關(guān)閉這個組件頁面
當(dāng)路由組件采用緩存后，通常都會配合這兩個生命周期鉤子