vue-cli项目中this.$router.push传参的各种方式和接受参数

1、必须在router/index.js中配置

这里有三个参数，后面跳转需要用到：

1、path：跳转路径

2、name：跳转的名字

3、component：组件名字

2、跳转

this.$router.push({key1:'/xx/xx',key2: {id:'1'}});

 key1：可以写2个值

• name：根据路由配置中的name属性查找，进行跳转。值必须是路由配置的name对应的
• path：根据路由配置的path属性查找，如果path错误，则根据路由配置的name查找进行跳转。值可以是路由配置的path，也可以是路由配置的name

 key2：可以写2个值

• query：类似于get方法，把参数拼接在浏览器上面，通过this.$route.query获取值，获取一次值后，刷新浏览器值还在。
• params：类似于post方法，参数没有拼接在浏览器上，通过this.$route.params获取值，跳转过去后能获取到值，刷新后就失效了。

 

所以排列组合后共四种形式

1. this.$router.push({name:'/xx/xx',query: {id:'1'}});
2. this.$router.push({name:'/xx/xx',params: {id:'1'}});
3. this.$router.push({path:'/xx/xx',query: {id:'1'}});
4. this.$router.push({path:'/xx/xx',params: {id:'1'}});

同理，使用router-link标签也是一样的

<router-link :to="{key1:''Message'',key2:{id:'1'}}">XXX</router-link>