vue实现路由跳转的方式

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有用得多。