vue 页面跳转传参

两个页面之间的跳转如果需要传参（例如需要传递当前的id），js里写 window.location.href="xxxxx?id=xx 就可以了；
但是vue不一样需要操作的是路由，需要用到 VueRouter
使用之前首先要了解 $router和$route

$router是一个VueRouter的实例可以导航到不同的路由里，如下

// 字符串
this.$router.push(\'/home\')

// 对象
this.$router.push({ path: \'/home\' })

// 命名的路由
this.$router.push({ name: \'user\', params: { userId: \'123\' }})

// 带查询参数，变成 /register?plan=private
this.$router.push({ path: \'/register\', query: { plan: \'private\' }})

$route是$router跳转到的当前一个对象，里面包含当前我们可以获取的path、query、name 、params等属性，如下
在里插入图片描述

因此VueRouter 两种传参方法，

1.第一种传参 name 与 params的结合使用，

const id = \'123\'  // 假设id为123
// 利用name和params传参
this.$router.push({ name: \'home\', params: { id }}) // -> /home/123
// 也可以直接传参
this,$router.push({ path: `/home/${id}` }) // -> /home/123

// 这里的 params 不生效，因为path要和query搭配
this.$router.push({ path: \'/home\', params: { id }}) // -> /home

如果传参时设置name属性，则需要在定义路由规则对象时也要设置name，并且path的值需要有/:id，如果没有/:id，则params传值一刷新页面就没了

// 如果传参设置name属性，则需要在定义路由对象规则时也要设置name
{ 
	path: \'/home/:id\',
  	name: \'home\',
 	component: Home 
 }

2.第二种传参 path 与 query结合使用，

const id = \'123\'  // 假设id为123
// 带查询参数，变成 /home?id=123
this.$router.push({ path: \'home\', query: { id }})

3.跳转后的页面取值用法类似，分别是this.$route.params.id和this.$route.query.id就可以得到id值。

总结：query类似于get传参，params则类似于post，即前者在浏览器地址栏中显示参数，后者则不显示，params传参一刷新就没了（如果传的参数在刷新后依旧存在，需要设置/:id），query传参刷新参数还存在