笔记：简述-Vue(vue-router)-$router与$route-params与query

最新推荐文章于 2025-12-12 12:36:47 发布

原创最新推荐文章于 2025-12-12 12:36:47 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue笔记专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue.js中的$router与$route的区别及使用方法。$router用于实现页面间的跳转，包括push、replace、go、back和forward等方法；而$route则主要用于获取当前路由信息，如通过params或query方式传递的参数。文中还特别提到了params传递参数需要在路由配置中声明，而query参数则直接附加在URL上。

$router与$route，前者似路由的发送者，后者似路由的接受者

//$router 路由跳转

this.$router.push();
this.$router.replace();
this.$router.go();
this.$router.back();
this.$router.forward();

//$route 路由参数接受
this.$route.params.id
this.$route.query.id

params与query,前者的参数在地址栏Url中隐藏键，后者显示键

this.$router.push({ name: 'user', params: { id: '123' }});
// http://xxxxx.com/user/123

this.$router.push({ path: 'user', query: { id: '123' }});
// http://xxxxx.com/user?id=123