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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_43851769/article/details/86536479

在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'}}">

二.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！！！

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

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

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

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