小編給大家分享一下vue-router前端路由之如何實(shí)現(xiàn)路由傳值，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

金州網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,金州網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為金州1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的金州做網(wǎng)站的公司定做！

路由傳值

在前端的路由里面，我們?cè)谇袚Q路由的時(shí)候，也相當(dāng)于切換了頁面，頁面與頁面之前有時(shí)候需要做到傳值 ，這個(gè)時(shí)候就需要進(jìn)行路由傳值，在VueRouter里面，兩個(gè)路由之間做跳轉(zhuǎn)的時(shí)候，如何進(jìn)行傳值呢？

普通跨頁面?zhèn)髦担?/p>

1.通過localStorage

setItem()
getItem()

2.通過search(地址欄 ? 后面的參數(shù))

VueRouter的路由傳值

VueRouter的路由傳值有兩種方式

jquery傳值。 類似get傳值

傳值的路由

this.$router.push({
  path: "/login?uname=" + this.userName
});

傳值路由第二種寫法

this.$router.push({
  path: "/login",
  query: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收過來的值為：" + this.$route.query.uname);        //這里是$route 沒有r
----

params傳值 。路徑變量傳值

params路由傳值可以把它理解成express路徑變量傳值 ，它也可以放在地址欄里面進(jìn)行傳遞

傳值路由第一種寫法（還是會(huì)將參數(shù)顯示在地址欄中）

this.$router.push({
  path: "/login/" + this.userName
});

傳值路由的第二種寫法（不會(huì)將參數(shù)顯示在地址欄中）

this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收過來的值為：" + this.$route.params.uname);

注意：在使用params傳遞參數(shù)的時(shí)候，我們需要在router的對(duì)象里面，找到當(dāng)前的這個(gè)路由，然后去更改它的 path

{
   path: "/login/:uname", //代表當(dāng)前url跳轉(zhuǎn)的路徑
   component: login, //代表在當(dāng)前這個(gè)路徑下面，我們?nèi)绾物@示組件（顯示那一個(gè)組件）
   name: "login" //給當(dāng)前路由取一個(gè)別名
 }

上面的path后面是 /login/:uname ,這一個(gè)是我們的一個(gè)路徑變量，前面的login代表路由，而后面 :uname 代表的是變量

---

通過第二種方式的params傳值 ，引伸出post原理傳值

params本身確實(shí)是會(huì)把參數(shù)添加到url地址欄，但是，我們可以讓它不顯示出來，使用下面的方法，我們就可以把它去掉，不顯示，從而內(nèi)容不經(jīng)過瀏覽器地址欄處理，直接做到傳值。

它只是把路由對(duì)象里面的路徑變量給去掉了，直接使用的params傳值

注意事項(xiàng)：因?yàn)樗裵ath里面的路徑變量去掉了，所以不能使用path去傳遞值了

this.$router.push({
  path: "/login/" + this.userName
});
//現(xiàn)在上面的方法就不可用了，而必須使用下面的方法
this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

這一個(gè)就是vue當(dāng)中變相去處理post傳值

以上是“vue-router前端路由之如何實(shí)現(xiàn)路由傳值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！