Vue-router路由傳參三種方法及區別


先有如下場景 點擊當前頁的某個按鈕跳轉到另外一個頁面去,並將某個值帶過去

<el-button type="primary" @click="handleClick(2)">查看詳情</el-button>

1、第一種方法:拼接方式

methods:{
  handleClick(id) {
       //直接調用$router.push 實現攜帶參數的跳轉
        this.$router.push({
          path: `/detail/${id}`,
     })
}

對應路由配置:

{
   path: '/detail/:id',
   name: 'detail',
   component: detail
}

獲取參數方式:

this.$route.params.id

 這種方式傳參,頁面刷新數據不會丟失。

 

2、第二種方法:params傳參

通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數。

methods:{
  handleClick(id) {
    this.$router.push({
      name: 'detail',  // 根據name確定匹配路由
      params: {
        id: id
     }
  })
}
//或者采用router-link
<router-link :to="{name: 'detail', params: { id: 1 }}">前往Detail頁面</router-link>

對應路由配置:

{
   path: '/detail/:id',
   name: 'detail', 
   component: detail
}

獲取參數方式:

this.$route.params.id

需要注意的是,params動態路由傳參,一定要在路由中定義參數,然后在路由跳轉的時候必須要加上參數,否則就是空白頁面。例如,

// 定義的路由中,只定義一個id參數
{
    path: 'detail/:id',
    name: 'detail',
    components: detail
}

// template中的路由傳參,
// 傳了一個id參數和一個token參數
// id是在路由中已經定義的參數,而token沒有定義
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail頁面</router-link>

// 在詳情頁接收
created () {
    // 以下都可以正常獲取到
    // 但是頁面刷新后,id依然可以獲取,而token此時就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

 

三、第三種方法:query傳參

使用path來匹配路由,然后通過query來傳遞參數,這種情況下 query傳遞的參數會顯示在url后面?id=?

methods:{
  handleClick(id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: id
          }
     })
 }

對應路由配置:

{
     path: '/detail',
     name: 'detail',
     component: detail
}

獲取參數:

this.$route.query.id

 

四、總結:params和query中的區別

1、接收方式

query傳參:this.$route.query.id

params傳參:this.$route.params.id

2、路由展現方式

query傳參:/detail?id=1&user=123&identity=1&更多參數

params傳參:/detail/123

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM