先有如下場景 點擊當前頁的某個按鈕跳轉到另外一個頁面去,並將某個值帶過去
<el-button type="primary" @click="handleClick(2)">查看詳情</el-button>
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