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 測試結果