vue-router 前端路由之路由傳值的方式詳解

更新時(shí)間：2019年04月30日 11:37:52 作者：艾歡歡

這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

路由傳值

在前端的路由里面，我們?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傳值

總結(jié)

以上所述是小編給大家介紹的vue-router 前端路由之路由傳值的方式詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: