vue的router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫

1.router-link的replace属性

*给router-link添加replace属性后页签不能后退：

2.编程式路由导航

*作用：不借助router-link实现路由的跳转，让落跳转更加灵活：

 3.缓存路由组件

*作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include='组件的名字'>

        <router-view></router-view>

</keep-alive>

4.两个新的生命周期钩子

*路由组件特有的两个生命周期钩子：activated、deactivated

 用于捕获路由组件的激活状态

<template>     <ul>         <h2 :style="{opacity}">欢迎学习</h2>         <li>news001<input type="text"></li>         <li>news002<input type="text"></li>         <li>news003<input type="text"></li>     </ul> </template>  <script> export default {     name:"News",     data() {         return {             opacity:1         }     },     activated(){         this.timer=setInterval(() => {             this.opacity-=0.01             if (this.opacity<=0) {                 this.opacity=1             }         }, 16);     },     deactivated() {         clearInterval(this.timer)     }, } </script>

5.全局前置_路由守卫

*meta{}//表示路由元信息，是用户自定义的信息

*简化上方代码：

   在需要权限校验的路由里配置meta：

 6.全局后置_路由守卫

*页面跳转后执行

//全局后置路由守卫 router.afterEach((to) => {     document.title=to.meta.title || "硅谷系统" })

 7.独享路由守卫

*独享路由守卫，只有前置没有后置，规则和全局前置路由守卫一样，配置在某个路由中

beforeEnter: (to, from, next) => {

   ···

}

8.组件内路由守卫

<template>   <div>       <h2>我是About的内容</h2>   </div> </template>  <script> export default {   //通过路由规则，进入该组件时被调用   beforeRouteEnter (to, from, next) {     next()   },   //通过路由规则，离开该组件时被调用   beforeRouteLeave (to, from, next) {     next()   } } </script>