Vue-router方法大全：让页面跳转随心所欲！

大家好，我是小杨，一个和Vue-router朝夕相处6年的前端老司机。今天给大家带来一份超实用的vue-router方法指南，保证让你看完就能玩转各种页面跳转！

一、核心导航方法

1. push - 最常用的跳转方式

javascript 复制代码

// 基本用法
this.$router.push('/home')

// 对象形式（推荐！）
this.$router.push({
  path: '/user',
  query: { id: 我.id }  // 生成 /user?id=123
})

// 命名路由跳转
this.$router.push({
  name: 'userProfile',
  params: { userId: 我.id }
})

我的实战经验：push就像浏览器的"前进"，会留下历史记录。

2. replace - 不留痕迹的跳转

javascript 复制代码

// 替换当前路由
this.$router.replace('/login')

适用场景：登录后跳转，不让用户回退到登录页。

3. go - 时光机般的导航

javascript 复制代码

// 后退一页
this.$router.go(-1)

// 前进两页
this.$router.go(2)

二、实用路由方法

1. resolve - 路由解析器

javascript 复制代码

const resolved = this.$router.resolve({
  name: 'article',
  params: { id: 我.articleId }
})
console.log(resolved.href) // 输出完整URL

2. addRoutes - 动态添加路由（Vue2）

javascript 复制代码

// 动态添加管理后台路由
const adminRoutes = [
  { path: '/admin', component: Admin }
]
this.$router.addRoutes(adminRoutes)

3. getRoutes - 获取所有路由（Vue3）

javascript 复制代码

const allRoutes = this.$router.getRoutes()
console.log(allRoutes)

三、导航守卫方法

1. beforeEach - 全局前置守卫

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.path === '/vip' && !我.isVip) {
    next('/upgrade') // 拦截非VIP用户
  } else {
    next()
  }
})

2. afterEach - 全局后置钩子

javascript 复制代码

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath) // 发送页面访问统计
})

四、路由信息获取

1. currentRoute - 获取当前路由

javascript 复制代码

// 在组件内
console.log(this.$route)

// 在路由实例上
console.log(this.$router.currentRoute.value) // Vue3

2. hasRoute - 检查路由是否存在

javascript 复制代码

if (this.$router.hasRoute('adminDashboard')) {
  // 路由存在时的逻辑
}

五、小杨的实用方法组合技

1. 智能回退功能

javascript 复制代码

methods: {
  smartGoBack() {
    if (window.history.length <= 1) {
      this.$router.push('/') // 没有历史记录时回首页
    } else {
      this.$router.go(-1)
    }
  }
}

2. 带确认的跳转

javascript 复制代码

async navigateWithConfirm(to) {
  if (this.hasUnsavedChanges) {
    const confirm = await this.$confirm('确定离开当前页面吗？')
    if (!confirm) return
  }
  this.$router.push(to)
}

六、方法使用注意事项

next陷阱：在导航守卫中必须调用next()

重复导航：处理NavigationDuplicated错误

javascript 复制代码

this.$router.push('/home').catch(err => {
  if (err.name !== 'NavigationDuplicated') {
    throw err
  }
})

异步路由：动态导入组件时要处理好加载状态

今天的vue-router方法大全就到这里啦！现在你应该可以像玩转游戏手柄一样熟练操作路由了。如果觉得有用，别忘了点赞收藏哦～有什么问题欢迎在评论区和我交流！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！