vue中有两种比较常见的路由跳转方式,接下来介绍一下我的理解,从路由跳转到和传参两个方面。
1.标签式导航
(1)<router-link to="/router1/456">标签式导航到router1</router-link>
(2)使用params<router-link :to="{name:'router1', params: { id:123 }">标签式导航到router1</router-link>
(千万记得此时的to需要加上冒号,params建议使用name方式,但是path同样好用)
(3)使用params<router-link :to="{path:'/router1', query: { id:123 }">标签式导航到router1</router-link>
(千万记得此时的to需要加上冒号,query建议使用path方式,但是name同样好用)
2.编程式导航
(1)this.$router.push({path: '/router1/456'})
(接收参数方式使用params)$route.params.id
(2)this.$router.push({name: 'router1', query:{ id: 456 })
(3)this.$router.push({path: '/router1', params:{ id: 456 })
3.注意事项
(1)使用query时不需要在路由处配置路由,如果不够明白,请看下面(相当于get请求)
(2)使用params需要配置路由 例如path: '/router1/:id'
,需要注意的是跳转路由传递参数时应该和配置路由是参数名字一样(相当于post请求)
4.还有一个曾经面试被问到的问题 route和router的区别
(1)router 主打路由跳转分为标签和编程两种方式,大同小异
(2)route 主打接受路由跳转时的参数 在html中使用 $route.query.id
(本文统一使用id作为名字,并不固定)或者$route.params.id