VUE路由携带参数的三种方式

vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据

路由中携带参数的方式总结如下:

路由定义示例:

 {
name: 'list',
path: '/list',
component: List
}

1. 通过query携带

  代码示例如下:

 this.$router.push(
{
path: '/list',
query: {
id: 1
}
}
)

  携带的参数会在地址栏中展示

  query可携带任意类型参数,如下:

      me.$router.push({
path: '/list',
query: {
name: '张三',
info: {
age: 12,
sex: 1,
classList: ['英语', '数学', '历史']
},
classList: ['英语', '数学', '历史'],
isTrue: false,
nums: 12,
func: function () {
console.log('======>>>>>>')
}
}
})

  获取参数的方式

 this.$route.query

  该方式的弊端在于,在页面间跳转可正常使用,如info、isTrue、func,但是在进行页面刷新时,所有参数值会转化为字符串,如对象info会转化为字符串'[Object Object]',布尔值isTrue会转化为'false',从而导致使用错误

2. 通过params携带参数

  params也可以携带任何任意类型的数据,在页面间跳转时,参数在地址栏不可见,可通过

 this.$route.params

方式获取,页面刷新后参数消失

3. 在路由中定义参数

  方式如下:

 {
path: '/detail/:id/:info/:isTrue/:classList',
name: 'detail',
component: Detail
}

参数会被全部转化为字符串,在地址栏中可见,可通过

1 this.$route.params

方式获取,页面刷新后参数不会消失

综上所述:

  在路由中虽然可以传递多种类型的参数,但是在页面刷新后会出现类型错误,所以在页面间传递数据时,尽量选择使用字符串进行传递

  

上一篇:我的java学习笔记


下一篇:利用WCF与Android实现图片上传并传参