Vue學習之--------路由的query、params參數、路由命名（3）（2022/9/5）

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

2、Vue學習之--------多級路由的使用

文章目錄

• ​​1、路由的query參數​​

• ​​1.1 傳遞參數​​
• ​​1.2 接收參數​​
• ​​1.3 項目中的實際應用​​
• ​​1.4 測試結果​​

• ​​2、路由的命名​​

• ​​2.1 作用​​
• ​​2.2 如何使用​​
• ​​2.3 在項目中的實際應用​​
• ​​2.4 測試效果​​

• ​​3、路由的params參數​​

• ​​3.1配置路由，聲明接收params參數​​
• ​​3.2 傳遞參數​​
• ​​3.3 接收參數​​
• ​​3.4 在項目中的實際應用​​
• ​​3.5 測試結果​​

• ​​4、路由的props配置​​

• ​​4.1 作用​​
• ​​4.2 應用​​
• ​​4.3 在項目中的實際應用​​

• ​​4.3.1 第一種方式​​
• ​​4.3.2 第二種方式​​
• ​​4.3.3 第三種方式​​

• ​​5、`<router-link>`的replace屬性​​

• ​​5.1 作用​​
• ​​5.2 浏覽器的曆史記錄有兩種寫入方式​​
• ​​5.3 如何開啟```replace```模式​​

1、路由的query參數

1.1 傳遞參數

<!-- 跳轉并攜帶query參數，to的字元串寫法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>
               
   <!-- 跳轉并攜帶query參數，to的對象寫法 -->
   <router-link 
      :to="{
         path:'/home/message/detail',
         query:{
            id:666,
           title:'你好'
         }
      }"
   >跳轉</router-link>      

1.2 接收參數

$route.query.id
   $route.query.title      

1.3 項目中的實際應用

1.4 測試結果

2、路由的命名

2.1 作用

給路由命名，然後跳轉（在項目中遇到過）

可以簡化路由的跳轉。

2.2 如何使用

• 1、給路由命名：

{
        path:'/demo',
        component:Demo,
        children:[
          {
            path:'test',
            component:Test,
            children:[
              {
                        name:'hello' //給路由命名
                path:'welcome',
                component:Hello,
              }
            ]
          }
        ]
      }      

• 2、簡化跳轉：

<!--簡化前，需要寫完整的路徑 -->
      <router-link to="/demo/test/welcome">跳轉</router-link>
      
      <!--簡化後，直接通過名字跳轉 -->
      <router-link :to="{name:'hello'}">跳轉</router-link>
      
      <!--簡化寫法配合傳遞參數 -->
      <router-link 
        :to="{
          name:'hello',
          query:{
             id:666,
                  title:'你好'
          }
        }"
      >跳轉</router-link>      

2.3 在項目中的實際應用

2.4 測試效果

3、路由的params參數

3.1配置路由，聲明接收params參數

​

​path:'detail/:id/:title'​

​, //使用占位符聲明接收params參數。在實際的項目開發中中遇到過

{
      path:'/home',
      component:Home,
      children:[
         {
            path:'news',
            component:News
         },
         {
            component:Message,
            children:[
               {
                  name:'xiangqing',
                  path:'detail/:id/:title', //使用占位符聲明接收params參數
                  component:Detail
               }
            ]
         }
      ]
   }      

3.2 傳遞參數

<!-- 跳轉并攜帶params參數，to的字元串寫法 -->
   <router-link :to="/home/message/detail/666/你好">跳轉</router-link>
               
   <!-- 跳轉并攜帶params參數，to的對象寫法 -->
   <router-link 
      :to="{
         name:'xiangqing',
         params:{
            id:666,
           title:'你好'
         }
      }"
   >跳轉</router-link>      

特别注意：路由攜帶params參數時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

3.3 接收參數

$route.params.id
   $route.params.title      

3.4 在項目中的實際應用

3.5 測試結果

4、路由的props配置

4.1 作用

讓路由元件更友善的收到參數

4.2 應用

{
  name:'xiangqing',
  path:'detail/:id',
  component:Detail,

  //第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail元件
  // props:{a:900}

  //第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數通過props傳給Detail元件
  // props:true
  
  //第三種寫法：props值為函數，該函數傳回的對象中每一組key-value都會通過props傳給Detail元件
  props(route){
    return {
      id:route.query.id,
      title:route.query.title
    }
  }
}      

4.3 在項目中的實際應用

4.3.1 第一種方式

//第一種寫法：props值為對象，該對象中所有的key-value的組合最終都會通過props傳給Detail元件

4.3.2 第二種方式

第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數通過props傳給Detail元件

隻能将params參數通過props傳給元件，query不行！

4.3.3 第三種方式

//第三種寫法：props值為函數，該函數傳回的對象中每一組key-value都會通過props傳給Detail元件

無限制、使用最多

5、的replace屬性

5.1 作用

• 控制路由跳轉時操作浏覽器曆史記錄的模式

5.2 浏覽器的曆史記錄有兩種寫入方式

• 分别為​

  ​push​

  ​​和​

  ​replace​

  ​​，​

  ​push​

  ​​是追加曆史記錄，​

  ​replace​

  ​​是替換目前記錄。路由跳轉時候預設為​

  ​push​

  ​

5.3 如何開啟​

​replace​

​模式