Vue学习之--------编程式路由导航、缓存路由组件、新的钩子函数（4）（2022/9/5）

1、路由(Router)的基本使用:1​

2、Vue学习之--------多级路由的使用:2​

3、路由的query、params参数、路由命名：3

文章目录

• ​​1、编程式路由导航​​

• ​​1.1 作用​​
• ​​1.2 具体编码​​
• ​​1.3 实际应用​​
• ​​1.4 测试结果​​

• ​​2、缓存路由组件​​

• ​​2.1 作用​​
• ​​2.2 具体编码​​
• ​​2.3 实际应用​​
• ​​2.4 测试结果​​

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

• ​​3.1. 作用​​
• ​​3.2. 具体名字​​
• ​​3.3 实际应用​​
• ​​3.4 测试结果​​

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. 具体名字

1. ​​activated​​路由组件被激活时触发。
2. ​​deactivated​​路由组件失活时触发。

3.3 实际应用

3.4 测试结果