update
迁移文档 小爱为你推荐使用新版本哦~~

# 路由传参

注意

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

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

  1. 直接通过生命周期onload获取。有弊端:加密传输的数据需要手动解码
  2. 通过 $Route 获取。好处:自动解码!还能获取到当前页面下的所有路由元信息,包括 fullPathNAVTYPE 等等。

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

# 非深度对象传递

// 假如你是通过name 来进行跳转。
this.$Router.push({ name: 'router1', params: { userId: '123' }})
// 同样 等同于
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
8
9
10

# 深度对象传递

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