vue中路由传参

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, " "));
}

获取url请求域名

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"; // 默认请求地址
}