vue中this.$router.push()路由傳值和獲取的兩種常見方法

一、路由傳值   this.$router.push()

（1） 想要導航到不一樣的URL，使用router.push()方法，這個方法會向history棧添加一個新紀錄，因此，當用戶點擊瀏覽器後退按鈕時，會回到以前的URL

（2）當點擊 <router-link> 時，這個方法會在內部調用，即點擊 <router-link :to="..."> 等同於調用 router.push(...)

　　a)      聲明式：<router-link :to="...">

　　b)      編程式：router.push(...)

　　c)      該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。　　

// 字符串
router.push('home')
 
// 對象
this.$router.push({path: '/login?url=' + this.$route.path});
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 帶查詢參數，變成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// 設置查詢參數
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 對象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 帶查詢參數，變成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
 
// 設計查詢參數對象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

二、獲取參數的兩種經常使用方法：params和query

（1）因爲動態路由也是傳遞params的，因此在 this.$router.push() 方法中path不能和params一塊兒使用，不然params將無效。須要用name來指定頁面。

及經過路由配置的name屬性訪問

this.$router.push({name:"menuLink",params:{alert:"頁面跳轉成功"}})

（2）在目標頁面經過this.$route.params獲取參數：

<p>提示：{{this.$route.params.alert}}</p>

（3）在目標頁面經過this.$route.query 獲取參數

//傳值
this.$router.push({path:"/menLink",query:{alert:"頁面跳轉成功"}})

//用query獲取值
<p>提示：{{this.$route.query.alert}}</p>

 

兩種方式的區別是query傳參的參數會帶在url後邊展現在地址欄，params傳參的參數不會展現到地址欄。須要注意的是接收參數的時候是route而不是router。兩種方式一一對應，名字不能混用