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)
}

六、方法使用注意事项

  1. next陷阱:在导航守卫中必须调用next()

  2. 重复导航:处理NavigationDuplicated错误

    javascript 复制代码
    this.$router.push('/home').catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        throw err
      }
    })
  3. 异步路由:动态导入组件时要处理好加载状态


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

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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

相关推荐
芭拉拉小魔仙几秒前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
JosieBook37 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js