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

标签：vue,router1,params,跳转,path,id,路由
来源： https://www.cnblogs.com/Apiccc/p/14300465.html