vue学习(51)vue-router(3)

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-04-20 18:56 被阅读0次
  1. <router-link>的replace属性
    1. 作用:控制路由跳转时操作浏览器历史记录的模式
    2. 浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
    3. 如何开启replace模式:
<router-link replace .......>News</router-link>
  1. 编程式路由导航
    1. 作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活
    2. 具体实现
//$router的两个API
this.$router.push({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
})

this.$router.replace({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退,正数前进,负数后退。
  1. 缓存路由组件
    1. 作用:让不展示的路由组件保持挂载,不被销毁。
    2. 具体编码
<keep-alive include="News"> 
  <router-view></router-view>
</keep-alive>

其中News指的是组件名,一般会使用在用户输入一些东西之后,切换回来,需要保持用户的输入。写include说明要缓存的组件,不写,则表示组件都会被缓存。如果有两个以上则写成数组的形式。

  1. 两个新的生命周期钩子
    1. 路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
    2. 具体的名字:
      activated路由组件被激活时触发。没有被<keep-alive>包裹的话,activated是不起作用的。在mounted之后执行。所以当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。
      deactivated路由组件失活时触发。

相关文章

网友评论

    本文标题:vue学习(51)vue-router(3)

    本文链接:https://www.haomeiwen.com/subject/bmxvertx.html