在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是“路由实例”对象包括了路由的跳转方法,钩子函数等。