当前位置: 当前位置:首页 > 知识 > vue实现路由跳转的方式正文

vue实现路由跳转的方式

作者:焦点 来源:知识 浏览: 【大 中 小】 发布时间:2026-10-17 06:13:45 评论数:

vue路由跳转,现路说穿了就两种玩法:一种是由跳在模板里写<router-link>标签,另一种是现路在JavaScript代码里调用router.push()。这俩是由跳日常开发里用得最多的,但真要细究起来,现路里头的由跳门道比你想的多。

先说说<router-link>。现路这玩意儿看着像普通的由跳<a>标签,但它内部会拦截点击事件,现路然后调用路由的由跳跳转方法,不会触发整个页面的现路刷新。比如你在导航菜单里写<router-link to="/home">首页</router-link>,由跳用户点一下,现路URL就变了,由跳视图也跟着换。现路有个细节容易踩坑——如果你在to属性里直接传字符串路径,那没问题;但你要是想带查询参数,就得写成对象形式::to="{ path: '/home', query: { id: 1 } }"。我见过不少新手直接把对象当字符串拼,结果路由跳过去参数全是undefined,排查半天才发现是引号问题。

再来看编程式导航。这种场景更灵活,比如你在某个异步操作完成之后才跳转,或者要根据条件动态决定跳去哪。这时候就得用this.$router.push()。注意,这里的$router是全局路由实例,跟$route(当前路由信息)不是一回事。很多人一开始分不清,写代码的时候在组件里打印this.$route,发现拿不到跳转方法,其实就是少了个r。

push方法其实还有几个兄弟:replace和go。replace跟push的区别在于,它不会往历史记录里添加新条目,而是替换当前那条。举个例子,你在表单页填了一堆数据,提交成功后跳转到列表页,这时候用replace就比push合适——不然用户点浏览器后退,又回到那个已经提交过的表单页,数据全没了,体验很糟糕。go就更简单了,就是控制历史记录的步数,this.$router.go(-1)相当于浏览器后退。

还有个比较冷门的跳转方式——直接修改window.location.href。但这事儿在vue项目里基本属于“下策”,因为这样会触发整个页面的重新加载,相当于把SPA变成了MPA,之前加载的状态全丢了。除非你要跳到外部链接,否则别这么干。

我自己在实际项目里有个习惯:如果跳转逻辑简单且固定,优先用<router-link>,因为它在SEO和无障碍访问上更友好,而且能利用vue-router内置的激活状态管理样式。但如果是业务逻辑里的跳转,比如“登录成功跳首页”这种,我几乎全用push,因为代码可读性更强,也方便在跳转前后做统一处理。

最后提醒一点:路由跳转的路径别写死。比如你把页面从/user/profile挪到了/user/info,如果代码里到处是硬编码的字符串路径,那改动起来就是一场灾难。正确做法是抽成常量或者用命名路由(name + params组合)。这样就算路径变了,只要name不变,代码一行都不用改。

vue路由跳转就这点事,但细节决定体验。用对了,用户感觉不到跳转的存在;用错了,各种白屏、参数丢失、历史记录混乱的问题接踵而至。多花点时间理解这几种方式的适用场景,比背API有用得多。