vue 路由跳轉 帶參數

我同事經常說我太懶了，喜歡復制不喜歡自己動手寫東西，我也才發現這個問題，現在都是能自己寫就自己寫，除非特們着急的時候，哈哈哈哈

最近學vue，雖然做了兩個小項目了，發但我還是小白中的姜太白，白的徹底

首先我要跳轉到list里面，這是router.js的配置

 

 

 

跳轉有兩種方法

router-link

1、 可以用path跳轉，path的值和router.js定義的path相同

 <router-link :to="{path:'/list',query:{id:1,name:2}}">點擊跳轉</router-link>

 2、可以用name跳轉，name的值必須和router.js定義的name相同

<router-link :to="{name:'List',query:{id:1,name:2}}">點擊跳轉</router-link>

 

query后面是參數，具體跳轉是這樣

 另一個頁面接受數據用

this.$route.query     //打印輸出  {id:"1",name:"2"}

用name 的時候 query可以換成是params，這樣的參數不會在url中顯示出來，類似與post請求，接收數據用

this.$route.params    //打印輸出  {id:"1",name:"2"}

this.$router.push() 

1、用path跳轉，path的值和router.js定義的path相同

this.$router.push({path:'/list',query:{id:1,name:2}})

2、用name跳轉，name的值必須和router.js定義的name相同

this.$router.push({ name:"List",query:{ id:1,name:2}})

query后面也是參數，路由是這樣的

另一個頁面接受數據用

this.$route.query     //打印輸出  {id:"1",name:"2"}

用name 的時候 query可以換成是params，這樣的參數不會在url中顯示出來，類似與post請求，接收數據用

this.$route.params    //打印輸出  {id:"1",name:"2"}

 

綜上所述，就是用path的時候，傳參只能用query,但是用name的時候，可以用query,可以用params,而且用params還比較安全，所以建議平時用name跳轉呀

 

大晚上的終於補完了，看脫口秀大會啦，哈哈哈哈哈

希望自己30歲還能在這個行業混下去，加油💪💪