vue-router传递参数的方法

1、vue-router传递参数的方法
vue-router传递参数分为编程式和声明式：
1.1 编程式： router.push
使用编程式的导航传递参数时有两种类型，分别是字符串和对象：
1.1.1 字符串

this.$router.push("/");
this.$router.push("Login");

跳转的页面命名为Login，页面链接是’/’,所以上面两种写法都是OK的

这种方法是不能传递参数的，传递参数需要使用对象~

1.1.2 对象
使用对象传参是也分为path和name，
name对应的对象名是params；path对应的对象名是query。
1.1.2.1 name-params
使用name传递参数使用的代码：

this.$router.push({name: 'Coupons', params: { id: '001' }});

使用name接收参数使用的代码：this.$route.params.id

console.log('接收的参数', this.$route.params.id)

结果示意：

页面刷新之后参数不保留

1.1.2.2 path=query
使用path传递参数使用的代码：

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

使用path接收参数使用的代码：this.$route.query.id

console.log('接收的参数', this.$route.query.id)

结果示意：

页面刷新之后参数保留

1.2 声明式： <router-link>
声明式跟变成是传递参数的方式其实一样，只是写法不同而已

<router-link :to="{ name: 'Coupons', params: { id: '001'}}">click to Coupons page</router-link>
<router-link :to="{ path: '/coupons', query: { id: '001'}}">click to Coupons page</router-link>