Vue-router的编程式导航有哪些方法?

简介: Vue-router的编程式导航有哪些方法?

Vue-router 提供了编程式导航的方法,这些方法允许你以编程的方式控制路由的跳转,而不是依赖于用户点击 <router-link> 组件。以下是 Vue-router 中常用的编程式导航方法:


router.push(location, onComplete?, onAbort?)

location:可以是一个描述目标位置的对象或者一个表示目标路径的字符串

onComplete(可选):导航成功完成 (在所有的异步钩子被解析之后) 调用,此时 html5History 模式下的 URL 已经更新。

onAbort(可选):导航到目标路由失败时被调用(例如,在目标路由设置了守卫钩子且这些钩子阻止了路由)。

使用 router.push 方法可以导航到不同的 URL,这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

router.replace(location, onComplete?, onAbort?)

与 router.push 类似,但它不会向 history 添加新记录,而是替换掉当前的 history 记录。

使用 router.replace 方法后,用户点击浏览器后退按钮时,不会返回到之前的 URL。

router.go(n)

这个方法的参数是一个整数 n。

当 n 为正数时,表示向前移动 n 个页面。

当 n 为负数时,表示向后退 n 个页面。

如果 n 为 0,则不进行任何操作。

这个方法类似于 window.history.go(n)。

router.back()

相当于 router.go(-1),表示后退到上一个页面。

router.forward()

相当于 router.go(1),表示前进到下一个页面,但这只在你已经进行了一次 router.go(-1) 后才能有效,因为前进的页面是在 history 栈中向前移动的。

使用这些编程式导航方法时,需要确保你的 router 实例是可用的。在 Vue 组件中,你可以通过 this.$router 访问到它。

// 在 Vue 组件中  
export default {  
  methods: {  
    goToHome() {  
      this.$router.push('/home');  
    },  
    replaceToProfile() {  
      this.$router.replace('/profile');  
    },  
    goBack() {  
      this.$router.back();  
    }  
  }  
}
相关文章
|
6月前
|
JavaScript
vue-router的编程式导航有哪些方法?
vue-router的编程式导航有哪些方法?
56 0
|
1月前
|
缓存
vue2进阶篇:vue-router之编程式路由导航
vue2进阶篇:vue-router之编程式路由导航
28 1
|
1月前
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种?分别有什么作用
Vue中的导航守卫有哪三种?分别有什么作用
|
3月前
|
前端开发 测试技术 开发者
React Router的神奇之处:如何用导航与路由管理让你的复杂SPA飞起来?
【8月更文挑战第31天】本文全面解析了React Router——一款用于React应用的路由与导航管理库。通过定义不同路径并依据URL渲染组件,React Router支持路径匹配、参数路由及嵌套路由等多种模式。文章详细介绍了其基本与高级用法,如使用`Link`组件导航、`Switch`组件进行路径匹配及`NavLink`自定义活动链接样式。此外,还探讨了懒加载、代码分割等性能优化技巧,并提供了简单示例代码,帮助读者快速上手。遵循本文最佳实践,开发者能够更高效地利用React Router构建复杂的单页面应用。
76 0
|
5月前
|
JavaScript Go
Vue-router的编程式导航有哪些方法
Vue-router的编程式导航有哪些方法
31 0
|
JavaScript API
Vue -- 编程式路由导航
Vue -- 编程式路由导航
|
前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-编程式导航实现后退效果
前端学习笔记202304学习笔记第十九天-vue3.0-编程式导航实现后退效果
54 0
|
前端开发
前端学习笔记202304学习笔记第十八天-vue3.0-导航守卫-初始化项目
前端学习笔记202304学习笔记第十八天-vue3.0-导航守卫-初始化项目
66 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-导航守卫-next函数的三种调用方式
前端学习笔记202304学习笔记第十七天-vue3.0-导航守卫-next函数的三种调用方式
60 0
|
前端开发
前端学习笔记202304学习笔记第十八天-vue3.0-导航守卫-案例效果演示
前端学习笔记202304学习笔记第十八天-vue3.0-导航守卫-案例效果演示
71 0