# 路由传参

注意

v2.0已更改为自动模式，请移除旧代码中的 encodeURI 构建项。深度对象传递不支持 动态路由

在组件中使用 $Route 来获取当前路由表中的配置及参数。$Route 对象下 params 为保留参数。获取参数有两种方式：

直接通过生命周期onload获取。有弊端：加密传输的数据需要手动解码 v2.0.8+ 优化此弊端
通过 $Route 获取。好处：自动解码！还能获取到当前页面下的所有路由元信息，包括 fullPath、NAVTYPE 等等。

请不要过多的使用深度对象传参！

# 非深度对象传递

this.$Router.push({ path: '/pages/router1/router1', query: { userId: '123' }})

// 获取方式
this.$Route.query.userId;

// URL 表现
//http://xxxx/router1?userId=123

1
2
3
4
5
6
7

# 深度对象传递

this.$Router.push({
    path:'/pages/404/404',
    query:{
        status:true,
        list:[
            {
                id:1
            },
        ]
    }
})
// 获取方式
this.$Route.query;

//URL 表现
http://xxxx/pages/404/404?query=%7B"status"%3Atrue,"list"%3A%5B%7B"id"%3A1%7D%5D%7D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# H5地址栏构建深度对象

const encodeStr=`query=${
    encodeURIComponent(JSON.stringify({
        status:true,
        list:[
            {
                id:1
            },
        ]
    }))
}`
//服务端或者其他跳转
window.location.href=`http://xxxxx/xxx?${encodeStr}`

1
2
3
4
5
6
7
8
9
10
11
12

# name 普通传参

this.$Router.push({ name: 'router1', params: { userId: '123' }})

// 获取方式
this.$Route.query.userId;

// H5 URL 表现
//http://xxxx/router1

// 其他端 URL 表现
//http://xxxx/router1?userId=123

1
2
3
4
5
6
7
8
9
10

H5端默认情况下 name+params 传参不会显示在URL上，如果你想将 name+params 传参显示在URL上，请配置 paramsToQuery:true。详细请查看配置，注意：如果配置了paramsToQuery:true，那么将不支持动态路由传参

# name 动态传参

// routes
{
    "path": "pages/page2/page2",
    "aliasPath": "/page2/:id",
    "name": "page2"
}

this.$Router.push({ name: 'page2', params: { id: '123' }})

// 获取方式
this.$Route.query.id;

// H5 URL 表现
//http://xxxx/page2/123

// 其他端 URL 表现
//http://xxxx/pages/page2/page2?id=123

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

← 命名路由路由守卫 →