四、路由進(jìn)階

1.路由模式

路由模式有兩種：hash模式（默認(rèn)） 和 history模式。
hash模式：使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點(diǎn)是路徑帶有#號(hào)，不夠美觀。
history模式：使用的是瀏覽器中內(nèi)置的history對(duì)象實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器，刷新后會(huì)丟失路由信息。

const router = new VueRouter({
  mode:'hash',
  routes
})

2.路由元信息

meta選項(xiàng)：用于配置路由的元信息，里面的內(nèi)容是自定義的，用于配置路由的數(shù)據(jù)。

{
    path:'/',
    name:'home',
    meta:{
        title:'首頁(yè)',
        //  可以在路由元信息里面配置路由的訪問(wèn)權(quán)限
        roles:['admin','vip','user']
    },
    // 路由組件懶加載
    component:()=>import('../pages/Home.vue'),
}

3.導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。其實(shí)，導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過(guò)程中的一些鉤子函數(shù)。
(1)前置守衛(wèi)--路由跳轉(zhuǎn)之前
使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)。
每次跳轉(zhuǎn)路由之前，都會(huì)攔截，next方法表示下一步。
通常在這里會(huì)做一些權(quán)限驗(yàn)證操作。
to：返回去哪里的路由信息
from：返回從哪來(lái)的路由信息
next方法：用于跳轉(zhuǎn)

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

(2)后置守衛(wèi)--路由跳轉(zhuǎn)完成
使用 router.afterEach 注冊(cè)一個(gè)后置守衛(wèi)。通常在這里會(huì)做一些頁(yè)面的修改操作

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

( ﹁ ﹁ ) ~→到這里都在路由配置文件router/index.js下操作配置

4.nprogress加載進(jìn)度條

nprogress是頁(yè)面跳轉(zhuǎn)時(shí)出現(xiàn)在瀏覽器頂部的進(jìn)度條。

(1) 安裝
npm install nprogress

(2) 導(dǎo)入

// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";

(3) 在導(dǎo)航守衛(wèi)中使用

// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
  // 開(kāi)啟loading
  NProgress.start();
  // 通常：在這里會(huì)做一些權(quán)限驗(yàn)證操作
  next();
});
// 2.路由后置守衛(wèi)--路由跳轉(zhuǎn)完成
router.afterEach((to, from) => {
  // 通常：在這里會(huì)做一些頁(yè)面的修改操作
  document.title = to.meta.title;
  // 結(jié)束loading
  NProgress.done();
});

5.二級(jí)路由

需要先定義一級(jí)路由組件，確定好在哪個(gè)組件中配置二級(jí)路由，就去那個(gè)組件的配置規(guī)則中添加children關(guān)鍵字，按照一級(jí)路由的配置方法配置規(guī)則。

  {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定義one的二級(jí)路由信息
    children:[
      {
        path:'nj',
        name:'nj',
        // 采用路由懶加載的方式，導(dǎo)入組件
        component:()=>import('../views/city/Nj.vue'),
        meta:{
          title:'南京'
        }
      },
      {
        path:'sz',
        name:'sz',
        component:()=>import('../views/city/Sz.vue'),
        meta:{
          title:'深圳'
        }
      }
    ]
  },

App.vue

<router-link to="/">Home</router-link> |
<router-link to="/one">One</router-link> |
<router-link to="/two">Two</router-link> |
<!-- 該路由視圖，匹配一級(jí)路由 -->
<router-view></router-view>

One.vue

<router-link to="/one/nj">南京</router-link> | 
<router-link to="/one/sz">深圳</router-link> |
<!-- 這里的路由視圖，匹配one的二級(jí)路由 -->
<router-view></router-view>

6.路由懶加載

采用路由懶加載，加載路由組件，提高首屏性能。首頁(yè)組件加載速度更快一些，是為了給客戶更好的體驗(yàn)。
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載，即在需要的時(shí)候的時(shí)候進(jìn)行加載。
component:()=>import('../pages/Home.vue')

7.路由分組懶加載

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用命名 chunk，一個(gè)特殊的注釋語(yǔ)法來(lái)提供 chunk name。
路由組件分組懶加載，在component屬性中添加如下注釋?zhuān)?br> 其中"a"是分組標(biāo)簽，哪些頁(yè)面需要同一個(gè)組就加相同的注釋。
component:()=>import( /* webpackChunkName: "a" */ '../pages/News.vue')

component: ()=>import(/* webpackChunkName: "a" */'../views/Home.vue')
component: () => import(/* webpackChunkName: "a" */'../views/About.vue')
component: () => import(/* webpackChunkName: "b" */'../views/One.vue')
component: () => import(/* webpackChunkName: "b" */'../views/Two.vue')

8.scoped

給style標(biāo)簽添加scoped屬性，表示局部樣式，這里面定義的樣式，只在當(dāng)前組件中有效，App全局組件中，是全局樣式，通常不加scoped

<style scoped>
    ....
</style>

9.sass

Sass 是一個(gè) CSS 預(yù)處理器。
使用sass可以定義嵌套定義樣式，大大節(jié)省css代碼，
使用sass可以定義變量，可以統(tǒng)一定義風(fēng)格。
使用$red來(lái)定義red，然后在下面用到該顏色的地方使用$red，以后可以統(tǒng)一修改。
(1) 安裝
npm install sass sass-loader@8 -D
(2) 使用

<div class="one">
    <h2>One</h2>
    <div class="province">
      江蘇省
      <div class="city">
        南京省
        <div class="district">
          雨花臺(tái)區(qū)
          <div class="street">賽虹橋街道</div>
        </div>
      </div>
    </div>
    <h3>南京的鴨血粉絲真好吃</h3>
    <p>南京的鹽水鴨真好吃</p>
</div>

<style scoped lang="scss">
$red:darkred;
.about{
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: $red;
  }
  p{
    color: $red;
  }
  .province{
    color: $red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

10.less

less 也是一個(gè) CSS 預(yù)處理器，在less里面定義變量的符號(hào)是@。
(1) 安裝
npm i less@3 -D
npm i less-loader@7 -D
(2) 使用

<style scoped lang="less">
@red:darkred;
.one {
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: @red;
  }
  p{
    color: @red;
  }
  .province{
    color: @red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

五、路由緩存

1.keep-alive組件

keep-alive：用于緩存路由組件，默認(rèn)情況下會(huì)緩存打開(kāi)的所有組件。
如果需要指定緩存哪些組件，通過(guò)include屬性指定，該屬性可以傳一個(gè)數(shù)組，數(shù)組中定義組件的名稱。
:include屬性是個(gè)數(shù)組的形式綁定，綁定的名稱是每個(gè)組件中name的名稱
作用：通過(guò)路由緩存，組件之間的切換就能保存上個(gè)組件的狀態(tài)，而不是切換之后又得重新操作。

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

2.路由組件特有的兩個(gè)生命周期

當(dāng)路由組件采用緩存后，created和mounted這兩個(gè)生命周期函數(shù)，只會(huì)在第一次執(zhí)行；并且destroyed這個(gè)生命周期函數(shù)不會(huì)執(zhí)行。
這時(shí)候，通常都會(huì)配合以下兩個(gè)生命周期鉤子。
路由組件激活狀態(tài)生命周期函數(shù)
activated(){}
路由組件失活狀態(tài)生命周期函數(shù)
deactivated(){}

注意：只有當(dāng)組件在 <keep-alive> 內(nèi)被切換，才會(huì)有activated 和 deactivated 這兩個(gè)鉤子函數(shù)。

    // 路由組件激活狀態(tài)生命周期函數(shù)
    activated() {
        console.log('路由組件激活');
        // 開(kāi)啟定時(shí)器
        this.timer = setInterval(()=>{
            this.count++
        },1000)
    },
    // 路由組件失活狀態(tài)生命周期函數(shù)
    deactivated() {
        console.log('路由組件失活');
        clearInterval(this.timer)
    }