Vue-Router第三彈-全局導航守衛、keep-alive

實現了路由的功能後（前一篇文章）

在跳轉不一樣的頁面的時候怎麼讓頁面的title動態變化呢？

這裏就要引入一個新的知識點了：

全局導航守衛

 在JavaScript中改變是經過 window.document.title= "new title"

在vue中是經過在index.js一個函數實現：

router.beforeEach((to, from, next) => {
  //from to 就是從那個頁面到那個頁面
  document.title = to.meta.title
  //next() 這裏是必寫的 有了它纔會執行到後面的路由
  next()
})

其中的meta在路由中設置哦

舉個栗子：

{
    path: '/about',
    component: About,
    meta: {
      title: "關於"
    },
  },

這樣就能夠每一個路由有相對應的title了

可是若是你若是設置了嵌套路由的話首頁的title爲undefind

解決辦法

router.beforeEach((to, from, next) => {
  //from to 就是從那個頁面到那個頁面
  document.title = to.matched[0].meta.title
  //next() 這裏是必寫的 有了它纔會執行到後面的路由
  next()
})

除了全局導航守衛還有不少的導航守衛：

這裏推薦看官網使用文檔導航守衛篇

而後繼續學習

keep-alive

在那種狀況使用keep-alive呢？

在Vue中一個組件頁面都是有本身的一個生命週期，在點擊它時就從新建立更新，離開去其餘的頁面組件就要被銷燬。

可是有的時候咱們不想要組件刷新，減小網頁壓力，保持緩存，這時就要用到keep-alive了

怎麼使用呢？

　　 <router-link to="/home" tag="button">首頁</router-link>
    <router-link to="/about" tag="button">關於</router-link>
    <router-link :to="'/user/'+dataid" tag="button">用戶</router-link>
    <router-link :to="{path:'/proflie',query:{name:'zhangsan',height:1.88,age:18}}" tag="button">個人</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

直接就用keep-alive標籤包住router-view

若是你想其中一個緩存，其餘不緩存就能夠

　　<keep-alive exclude="組件的name">
      <router-view></router-view>
    </keep-alive>

 

題外話：

Vue 組件活躍函數

    activated() {
      console.log('點擊後處於活躍狀態');
    },
    activated() {
      console.log('離開後處於不活躍狀態');
    },

路由篇差很少結束了，謝謝你們閱讀，繼續加油！！！！