vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)

更新時間：2020年05月10日 16:23:25 作者：海闊天空.

在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學習下。

日常業(yè)務中，路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的，傳參的方式有三種：

1）通過動態(tài)路由方式

//路由配置文件中 配置動態(tài)路由
{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
var id = 1;
this.$router.push('/detail/' + id)
 
//跳轉(zhuǎn)后頁面獲取參數(shù)
this.$route.params.id

2）通過query屬性傳值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
this.$router.push({
 path: '/detail',
 query: {
  name: '張三'，
  id: 1,
 }
})
 
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.query

3）通過params屬性傳值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
this.$router.push({
 name: 'Detail',
 params: {
  name: '張三'，
  id: 1,
 }
})
 
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.params

總結(jié)：

1.動態(tài)路由和query屬性傳值頁面刷新參數(shù)不會丟失， params會丟失

2.動態(tài)路由一般用來傳一個參數(shù)時居多(如詳情頁的id), query、params可以傳遞一個也可以傳遞多個參數(shù) 。

補充方法：

頁面刷新數(shù)據(jù)不會丟失

methods：{
 insurance(id) {
    //直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
    this.$router.push({
     path: `/particulars/${id}`,
    })
}

需要對應路由配置如下：

this.$route.params.id

到此這篇關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.js?el-table虛擬滾動完整實例代碼
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下
2022-12-12
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue加載中動畫組件使用方法詳解
這篇文章主要為大家詳細介紹了Vue加載中動畫組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue中push()和splice()的使用解析
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue axios 表單提交上傳圖片的實例
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
uniapp微信小程序axios庫的封裝及使用詳細教程
這篇文章主要給大家介紹了關(guān)于uniapp微信小程序axios庫的封裝及使用的相關(guān)資料,Axios是一個基于promise網(wǎng)絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下
2023-08-08
Vue項目中token驗證登錄(前端部分)
這篇文章主要為大家詳細介紹了Vue項目中token驗證登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue實現(xiàn)登錄類型切換
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄類型切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
vue 中使用 vxe-table 制作可編輯表格的使用過程
這篇文章主要介紹了vue 中使用 vxe-table 制作可編輯表格的使用過程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-08-08