vue專案中頁面跳轉間傳遞引數的三種方法。

例如，該頁面有一方法hadePage()，跳轉到User元件，並攜帶引數。

1、動態路由匹配

 hadePage: function(id) {
    this.$router.push({
        path: `user/${id}`
    })
}

需要在path中新增 /:id 來對應 $router.push 中 path 攜帶的引數，需要對應路由配置：

{
    // 動態路徑引數 以冒號開頭
    path:  "/user/:id", 
    name:  "user", 
    component:  User
}

跳轉頁面引數獲取：

this.$route.params.id

2、命名式傳參

通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。

hadePage: function(id) {
    this.$router.push({
        name: 'user',
        params: { id: id }
    })
}

// vue中跳轉直接帶引數  連結到一個命名路由，可以給router-link的to屬性傳一個物件：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

這裡即可以在path中新增 /:id 也可以不新增，新增資料會在url中顯示，不新增資料就不會顯示，對應路由配置：

{
    path:  "/user", 
    name:  "user", 
    component:  User
}

跳轉頁面引數獲取：

this.$route.params.id

3、程式設計式導航（程式設計式傳參）

通過path來確定匹配的路由，通過query來傳遞引數。

hadePage: function(id) {
    this.$router.push({
        path: '/user',
        query: { id: id }
    })
}
 

對應路由配置：

{
    path:  "/user", 
    name:  "user", 
    component:  User
}

跳轉頁面引數獲取：

this.$route.query.id

注意：params 傳參，push 裡面只能是 name:'xxxx', 不能是 path:'/xxx', 因為 params 只能用 name 來引入路由，如果這裡寫成了 path，接收引數頁面會是 undefined！！！

另附：

擷取url引數方法

getUrlParam:function (name) {
    let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
    if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " "));
}

getDomain:function() {
　　// 判斷是否是本地執行
　　if(location.href.indexOf('://localhost') == -1 || location.href.indexOf('file://') == -1){
　　　　var host = window.location.host; // 等同於document.domain;
　　　　var st = location.href.indexOf("://", 1);
　　　　var http = location.href.substring(0, st+3);
　　　　return http + host;
　　}

　　return "http://baidu.com"; // 預設請求地址
}