Vue-Router第三弹-全局导航守卫keep-alive

Posted 2021-08-12 zy简单男孩

实现了路由的功能后（前一篇文章）

在跳转不同的页面的时候怎么让页面的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(\'离开后处于不活跃状态\');
    },

路由篇差不多结束了，谢谢大家阅读，继续加油！！！！