1、编程式路由导航

1.1 作用

不借助<router-link>实现路由跳转，让路由跳转更加灵活

1.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.3 实际应用

在这里插入图片描述

1.4 测试结果

在这里插入图片描述

2、缓存路由组件

2.1 作用

让不展示的路由组件保持挂载，不被销毁。

2.2 具体编码

   <keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>

2.3 实际应用

在这里插入图片描述

2.4 测试结果

在这里插入图片描述

3、两个新的生命周期钩子

3.1. 作用

路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

3.2. 具体名字

activated路由组件被激活时触发。
deactivated路由组件失活时触发。

3.3 实际应用

在这里插入图片描述

3.4 测试结果

在这里插入图片描述