vue路由跳转的两种方式

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

上一篇:静态路由配置实验


下一篇:华为网络设备介绍及基础配置命令