vue-router传递参数

vue-router传递参数分为两种：

1、编程式导航：this.$router.push()

（1）、命名路由传递参数需要使用params来传递，目标页面接收传递参数时使用params。

　　特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

　　params配合name使用

　　传递参数如下：

this.$route.push({name:'home',params:{id:'1'}})

　　页面接受参数如下:

{{this.$route.params.id}}

（2）、查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数，目标页面接收传递的参数使用query。刷新页面不会出错

　　query配合path使用

　　传递参数如下：

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

　　页面接受参数如下:

{{this.$route.query.id}}

　　

2、声明式导航：<router-link to=""></router-link>（跟上面规则其实一样就是写法不同罢了）

（1）、命名路由传递参数需要使用params来传递，目标页面接收传递参数时使用params。

<router-link :to="{ name: 'home', params: { id: 1}}">click to news page</router-link>

（2）、查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数，目标页面接收传递的参数使用query。刷新页面不会出错

<router-link :to="{ path: '/home', query: { id: 1}}">click to news page</router-link>