1. Vue Router基础跳转方式作为Vue生态中最核心的路由管理工具Vue Router提供了多种灵活的页面跳转方案。在实际项目中我们最常用的就是router-link标签和编程式导航这两种基础方式。先说router-link这个组件相当于Vue版的a标签但功能更强大。我习惯把它称为智能链接因为它不仅能处理路由跳转还能自动给当前活跃路由添加样式类。比如下面这个典型用法router-link to/about classnav-link关于我们/router-link当用户点击这个链接时Vue Router会无缝切换到/about路由同时自动给这个元素添加router-link-active类方便我们设置高亮样式。这个特性在导航菜单中特别实用省去了手动判断当前路由的麻烦。不过在实际开发中很多场景需要更灵活的跳转控制这时候就要用到编程式导航了。最常用的就是this.$router.push()方法它支持多种参数形式// 字符串路径 this.$router.push(/user) // 带参数的对象 this.$router.push({ path: /user, query: { id: 123 } }) // 命名路由 this.$router.push({ name: profile, params: { username: vuejs } })我特别喜欢用命名路由的方式因为这样即使后期路由路径变更也不需要修改跳转代码。记得有次项目重构就是因为用了命名路由节省了大量修改跳转逻辑的时间。2. 编程式导航的进阶用法除了基础的push方法Vue Router还提供了几个非常实用的编程式导航方法。先说replace()它和push很像但不会在history中留下记录。这在某些特定场景特别有用比如用户完成支付后跳转到结果页我们通常不希望用户能回退到支付页。// 替换当前路由 this.$router.replace(/payment/success)另一个常用的是go()方法用来控制页面前进后退。这个API和原生window.history.go()用法一致// 后退一页 this.$router.go(-1) // 前进两页 this.$router.go(2)在实际项目中我经常用这些方法来实现自定义的导航逻辑。比如电商网站的购物流程可以用push方法一步步引导用户填写信息在最后提交时用replace方法防止用户误操作回退。这里有个小技巧在Vue3的setup语法中我们需要先引入useRouterimport { useRouter } from vue-router export default { setup() { const router useRouter() const navigate () { router.push(/dashboard) } return { navigate } } }3. 处理外部链接跳转虽然Vue Router主要管理内部路由但项目中经常需要跳转到外部网站。最简单的方式就是用原生的a标签a hrefhttps://www.baidu.com target_blank百度一下/a但这样会直接跳转如果我们的SPA中有全局状态需要保存可能会出现问题。更优雅的方式是用window.openconst openExternal (url) { window.open(url, _blank) }我在实际项目中通常会封装一个工具函数加入一些额外处理export const openNewTab (url) { const newWindow window.open(, _blank) newWindow.opener null newWindow.location.href url }这样设置opener为null可以防止新窗口通过window.opener访问原窗口提高安全性。对于需要携带参数的场景可以这样处理const shareLink https://example.com/share?token${encodeURIComponent(userToken)} window.open(shareLink, _blank)4. 路由跳转的最佳实践经过多个项目的实践我总结出一些路由跳转的经验。首先是权限控制可以在全局路由守卫中处理router.beforeEach((to, from, next) { if (to.meta.requiresAuth !isAuthenticated()) { next(/login) } else { next() } })其次是处理动态路由参数。当我们需要从/user/123跳转到/user/456时由于是同一个组件Vue默认会复用组件实例。如果需要在参数变化时重新获取数据可以这样处理watch: { $route.params.id(newId) { this.fetchUserData(newId) } }对于移动端项目我习惯添加过渡动画提升体验router-view v-slot{ Component } transition namefade modeout-in component :isComponent / /transition /router-view最后分享一个性能优化技巧对于复杂页面的路由跳转可以使用路由懒加载const routes [ { path: /dashboard, component: () import(./views/Dashboard.vue) } ]这样只有在访问该路由时才会加载对应组件显著提升首屏加载速度。我在一个大型后台管理系统中应用这个技巧后首屏加载时间减少了40%。
Vue Router跳转全攻略：从基础路由到新窗口打开外部链接
1. Vue Router基础跳转方式作为Vue生态中最核心的路由管理工具Vue Router提供了多种灵活的页面跳转方案。在实际项目中我们最常用的就是router-link标签和编程式导航这两种基础方式。先说router-link这个组件相当于Vue版的a标签但功能更强大。我习惯把它称为智能链接因为它不仅能处理路由跳转还能自动给当前活跃路由添加样式类。比如下面这个典型用法router-link to/about classnav-link关于我们/router-link当用户点击这个链接时Vue Router会无缝切换到/about路由同时自动给这个元素添加router-link-active类方便我们设置高亮样式。这个特性在导航菜单中特别实用省去了手动判断当前路由的麻烦。不过在实际开发中很多场景需要更灵活的跳转控制这时候就要用到编程式导航了。最常用的就是this.$router.push()方法它支持多种参数形式// 字符串路径 this.$router.push(/user) // 带参数的对象 this.$router.push({ path: /user, query: { id: 123 } }) // 命名路由 this.$router.push({ name: profile, params: { username: vuejs } })我特别喜欢用命名路由的方式因为这样即使后期路由路径变更也不需要修改跳转代码。记得有次项目重构就是因为用了命名路由节省了大量修改跳转逻辑的时间。2. 编程式导航的进阶用法除了基础的push方法Vue Router还提供了几个非常实用的编程式导航方法。先说replace()它和push很像但不会在history中留下记录。这在某些特定场景特别有用比如用户完成支付后跳转到结果页我们通常不希望用户能回退到支付页。// 替换当前路由 this.$router.replace(/payment/success)另一个常用的是go()方法用来控制页面前进后退。这个API和原生window.history.go()用法一致// 后退一页 this.$router.go(-1) // 前进两页 this.$router.go(2)在实际项目中我经常用这些方法来实现自定义的导航逻辑。比如电商网站的购物流程可以用push方法一步步引导用户填写信息在最后提交时用replace方法防止用户误操作回退。这里有个小技巧在Vue3的setup语法中我们需要先引入useRouterimport { useRouter } from vue-router export default { setup() { const router useRouter() const navigate () { router.push(/dashboard) } return { navigate } } }3. 处理外部链接跳转虽然Vue Router主要管理内部路由但项目中经常需要跳转到外部网站。最简单的方式就是用原生的a标签a hrefhttps://www.baidu.com target_blank百度一下/a但这样会直接跳转如果我们的SPA中有全局状态需要保存可能会出现问题。更优雅的方式是用window.openconst openExternal (url) { window.open(url, _blank) }我在实际项目中通常会封装一个工具函数加入一些额外处理export const openNewTab (url) { const newWindow window.open(, _blank) newWindow.opener null newWindow.location.href url }这样设置opener为null可以防止新窗口通过window.opener访问原窗口提高安全性。对于需要携带参数的场景可以这样处理const shareLink https://example.com/share?token${encodeURIComponent(userToken)} window.open(shareLink, _blank)4. 路由跳转的最佳实践经过多个项目的实践我总结出一些路由跳转的经验。首先是权限控制可以在全局路由守卫中处理router.beforeEach((to, from, next) { if (to.meta.requiresAuth !isAuthenticated()) { next(/login) } else { next() } })其次是处理动态路由参数。当我们需要从/user/123跳转到/user/456时由于是同一个组件Vue默认会复用组件实例。如果需要在参数变化时重新获取数据可以这样处理watch: { $route.params.id(newId) { this.fetchUserData(newId) } }对于移动端项目我习惯添加过渡动画提升体验router-view v-slot{ Component } transition namefade modeout-in component :isComponent / /transition /router-view最后分享一个性能优化技巧对于复杂页面的路由跳转可以使用路由懒加载const routes [ { path: /dashboard, component: () import(./views/Dashboard.vue) } ]这样只有在访问该路由时才会加载对应组件显著提升首屏加载速度。我在一个大型后台管理系统中应用这个技巧后首屏加载时间减少了40%。
