vue-router前端路由之如何實現路由傳值

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

路由傳值

在前端的路由里面，我們在切換路由的時候，也相當于切換了頁面，頁面與頁面之前有時候需要做到傳值 ，這個時候就需要進行路由傳值，在VueRouter里面，兩個路由之間做跳轉的時候，如何進行傳值呢？

普通跨頁面傳值：

1.通過localStorage

setItem()
getItem()

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

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路徑變量傳值 ，它也可以放在地址欄里面進行傳遞

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

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

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

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

接收值的路由

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

注意：在使用params傳遞參數的時候，我們需要在router的對象里面，找到當前的這個路由，然后去更改它的 path

{
   path: "/login/:uname", //代表當前url跳轉的路徑
   component: login, //代表在當前這個路徑下面，我們如何顯示組件（顯示那一個組件）
   name: "login" //給當前路由取一個別名
 }

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

---

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

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

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

注意事項：因為它把path里面的路徑變量去掉了，所以不能使用path去傳遞值了

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

這一個就是vue當中變相去處理post傳值

以上是“vue-router前端路由之如何實現路由傳值”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！