快捷導(dǎo)航

vue路由傳參頁面刷新參數(shù)丟失問題解決方案

更新時(shí)間：2019年10月08日 09:20:41 作者：有夢(mèng)想的咸魚前端

這篇文章主要介紹了vue路由傳參頁面刷新參數(shù)丟失問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最近項(xiàng)目中涉及到跨頁面?zhèn)鲄?shù)和后臺(tái)進(jìn)行數(shù)據(jù)交互，看到需求之后第一反應(yīng)就是用路由傳參來解決；Vue中給我們提供了三種路由傳參方式，下面我們一個(gè)一個(gè)的來看一下：

方法一：params傳參：

this.$router.push({
    name:"admin",
　　　　//這里的params是一個(gè)對(duì)象，id是屬性名，item.id是值(可以從當(dāng)前組件或者Vue實(shí)例上直接取)
    params:{id:item.id}
})    

//這個(gè)組件對(duì)應(yīng)的路由配置
{
　　//組件路徑
  path: '/admin',
　　//組件別名
  name: 'admin',
　　//組件名
  component: Admin,
}

通過params傳遞參數(shù)，如果我們想獲取id的參數(shù)值，我們可以通過this.$route.params.id這種方式來打印出來就可以得到了；（注意：獲取參數(shù)的時(shí)候是$route，跳轉(zhuǎn)和傳參的時(shí)候是$router）

方法二：路由屬性配置傳參：

this.$router.push({
    name:"/admin/${item.id}",
})    

//這個(gè)組件對(duì)應(yīng)的路由配置
{
　　//組件路徑
  path: '/admin:id',
　　//組件別名
  name: 'admin',
　　//組件名
  component: Admin,
}

通過路由屬性配置傳參我們可以用this.$route.params.id來獲取到id的值，注意this.$router.push方法里面路徑帶的是值，路由配置項(xiàng)那里帶的是變量名(屬性名)來實(shí)現(xiàn)的對(duì)應(yīng)；

以上兩種傳參方式基本上可以理解為ajax中的post請(qǐng)求方式，參數(shù)都是不可見的，但是上面兩種方法都有一個(gè)弊端，就是當(dāng)頁面刷新了是獲取不到參數(shù)值的，那么有沒有一種方法是頁面刷新之后參數(shù)依然存在呢？

方法三：query傳參

this.$router.push({
    name:"/admin",
　　　　 query:{id：item.id}
})    
//這個(gè)組件對(duì)應(yīng)的路由配置
{
　　//組件路徑
  path: '/admin',
　　//組件別名
  name: 'admin',
　　//組件名
  component: Admin,
}

第三種方式是用query來傳參，這種方式是可以解決頁面刷新參數(shù)消失問題的，這種方式可以理解為是ajax中的get方法，參數(shù)是直接在url后面添加的，參數(shù)是可見的，所以解決頁面刷新參數(shù)消失問題建議使用方法三來解決；

其實(shí)解決頁面刷新參數(shù)丟失問題的方案還有很多，比如把參數(shù)存在sessionStorange或者localStorange中都是可行的，不過我們既然用vue框架，就要用vue的方式來解決問題。這里只是想告訴大家，問題的解決方案可以多種多樣，要學(xué)會(huì)用多種方式或者說多種方案來解決一個(gè)問題，不要有太多的局限性！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: