Vue中如何使用路由跳转页面及传递参数

在Vue中构建工程目录时，会有对话提示是否安装router，这里就不再多说，直接开始说一说vue中路由跳转的几种方法。

使用之前需要在工程目录router文件夹中index.js文件中引入及配置路径。
例如：

一.router-link

<router-link :to='/City'>	//需要跳转到的页面的路径

这是在视图层内标签形式的跳转方式，浏览器会将router-link标签解析成一个a标签。

传递参数

<router-link :to="{name:'index',query:{id:'xxx',name:'xxx'}}">
<router-link :to="{name:'index',params:{id:'xxx',name:'xxx'}}">

二.this.$router.push（‘路径或组件名称’）

这种方式是在逻辑层，以事件驱动的，常用于路由传参。并且传参有query和params两种。
1.query方式传参和接收参数
传参:

this.$router.push({
   path:'/xxx'
   query:{
     id:id
   }
})

接收参数:

this.$route.query.id

2.params方式传参和接收参数
传参:

this.$router.push({
    name:'xxx'
    params:{
      id:id
    }
})

接收参数:

this.$route.params.id

注意:params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

params方式不会在浏览器路径中显示参数，但是F5强制刷新会丢失参数undefined
query方式会在浏览器路径中显示参数，而F5刷新依然可以获取但参数，不会丢失
可以根据不同场景及需求进行选择使用。

另外细心的小伙伴一定发现了，接收参数是this.$route！ 重要的事情说三遍啊！ 不要搞错了

那么router和route两者有什么区别呢

route是“路由信息对象”，包括path，params，hash，query，fullPath， matched，name等路由信息参数。

router是“路由实例”对象包括了路由的跳转方法，钩子函数等。