vue 跳转携带的参数如何获取_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

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

综上所述：

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

vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

vue路由传参的三种方式区别(params,query)

最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下

针对淡入淡出的定时轮播效果js

如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

20165319第五周java学习笔记

教材内容总结 1.String类和StringBuffer类都覆盖了toString方法,都是返回字符串. 所以带不带toString效果是一样的. 2.instanceOf运算符可以用来判断某个对象 ...

nginx 跳转

nginx 跳转 一.需求:当需要在别的机访问本机房的服务器问题. 虚拟主机头配置 server { listen ; server_name test.zlx.com; location / { i ...

算法之路 level 01 problem set

2992.357000 1000 A+B Problem1214.840000 1002 487-32791070.603000 1004 Financial Management880.192000 ...

SSH免密登陆配置过程和原理解析

SSH免密登陆配置过程和原理解析 SSH免密登陆配置过很多次,但是对它的认识只限于配置,对它认证的过程和基本的原理并没有什么认识,最近又看了一下,这里对学习的结果进行记录. 提纲: 1.SSH免密登陆 ...