vue页面跳转并传参

用Router跳转界面并传参数：

一、用query

　　1、<router-link :to="{path: '/home', query:{name: '小刚同学',vip: '100'}}">跳转界面</router-link>

　　说明：path为配置的路径，query为传给要跳转界面的参数，此参数为一个对象。

 　　2、用params

　　　　1、<router-link :to="{name: 'home', params:{name: '小刚同学',vip: '100'}}">跳转界面</router-link>

　　　　说明：此时的name就为上图中配置的name，params为传给界面的参数。

二、用方法跳转界面并传参

　　1、在自己的方法里面

　　　　 this.$router.push( { name : '/home', params: { username  :  '小红', sex :  '男'}});  或者  this.$router.push( { path : '/home',  query : { username :  '小红', sex :  '男' } } );

　　　　说明：这种跳转界面的方式其实意思和上面一样的，params和query都是一个对象，这个对象就是传给界面的参数。

三、接收参数

　　1、可以在 

　　　　export default {
　　　　　　data () {
　　　　　　　　return {
　　　　　　　　　　msg: this.$route.query //此方式只能接收通过query 传过来的参数（还可以  this.$route.params接收通过params传过来的参数）
　　　　　　　　}
　　　　　　}

　　　　}

　　注意：传参数用的   this.$router    ,  接收参数用的    this.$route  ，这两个是不一样的。