个人名片
🎓作者简介:java领域优质创作者
🌐个人主页:码农阿豪
📞工作室:新空间代码工作室(提供各种软件服务)
💌个人邮箱:[2435024119@qq.com]
📱个人微信:15279484656
🌐个人导航网站:www.forff.top
💡座右铭:总有人要赢。为什么不能是我呢?
- 专栏导航:
码农阿豪系列专栏导航
面试专栏:收集了java相关高频面试题,面试实战总结🍻🎉🖥️
Spring5系列专栏:整理了Spring5重要知识点与实战演练,有案例可直接使用🚀🔧💻
Redis专栏:Redis从零到一学习分享,经验总结,案例实战💐📝💡
全栈系列专栏:海纳百川有容乃大,可能你想要的东西里面都有🤸🌱🚀
目录
- Vue.js入门系列(二十九):深入理解编程式路由导航、路由组件缓存与路由守卫
- 引言
- 一、编程式路由导航
- 1.1 什么是编程式路由导航?
- 1.2 基本用法
- 1.3 `replace`与`push`的区别
- 二、缓存路由组件
- 2.1 什么是路由组件缓存?
- 2.2 使用`<keep-alive>`缓存组件
- 2.3 控制缓存的组件
- 三、两个新的生命周期钩子
- 3.1 `activated`与`deactivated`钩子
- 四、全局前置路由守卫
- 4.1 什么是路由守卫?
- 4.2 定义全局前置守卫
- 4.3 `next`函数
- 五、全局后置路由守卫
- 5.1 定义全局后置守卫
- 六、总结
Vue.js入门系列(二十九):深入理解编程式路由导航、路由组件缓存与路由守卫
引言
在Vue.js应用中,Vue Router提供了强大的路由管理功能,支持多种导航方式、组件缓存和生命周期钩子,以及全局路由守卫。这些功能对于构建复杂应用至关重要。在本文中,我们将详细探讨编程式路由导航、路由组件缓存、两个新的生命周期钩子,以及全局前置和后置路由守卫的使用。
一、编程式路由导航
1.1 什么是编程式路由导航?
编程式路由导航是指使用JavaScript代码通过Vue Router进行导航,而不是依赖于模板中的<router-link>
。这种方式提供了更大的灵活性,允许我们在代码逻辑中控制路由的跳转。
1.2 基本用法
Vue Router 提供了this.$router.push()
和this.$router.replace()
方法,用于在代码中执行路由导航。
// 导航到指定路径
this.$router.push('/about');// 使用命名路由
this.$router.push({ name: 'user', params: { id: 123 } });// 带查询参数的导航
this.$router.push({ path: '/search', query: { q: 'Vue.js' } });
1.3 replace
与push
的区别
replace
和 push
的主要区别在于历史记录的处理方式:
push
会在浏览器历史记录中添加一个新的记录。replace
则会替换当前的历史记录。
// 替换当前的路由
this.$router.replace({ name: 'home' });
replace
通常用于需要覆盖当前页面而不想让用户回到前一页面的场景中。
二、缓存路由组件
2.1 什么是路由组件缓存?
在某些场景下,我们希望路由组件在被切换出去时不被销毁,再次切换回来时能够保留其状态。Vue 提供了<keep-alive>
组件用于缓存这些路由组件。
2.2 使用<keep-alive>
缓存组件
通过在<router-view>
外层包裹<keep-alive>
组件,我们可以实现路由组件的缓存。
<template><div id="app"><router-link to="/home">Home</router-link><router-link to="/about">About</router-link><keep-alive><router-view></router-view></keep-alive></div>
</template>
在这个示例中,/home
和/about
两个路由对应的组件在被切换出去时不会被销毁,当用户返回时,这些组件会保留之前的状态。
2.3 控制缓存的组件
可以通过组件的name
属性和<keep-alive>
的include
、exclude
属性来精确控制哪些组件需要被缓存。
<keep-alive include="home"><router-view></router-view>
</keep-alive>
在这个例子中,只有名称为home
的组件会被缓存,其他组件不会。
三、两个新的生命周期钩子
3.1 activated
与deactivated
钩子
在使用<keep-alive>
缓存组件时,Vue 提供了两个新的生命周期钩子来处理组件的激活与停用:
activated
:当组件从缓存中激活时调用。deactivated
:当组件被缓存时调用,而不是被销毁。
export default {data() {return {message: 'Hello'};},activated() {console.log('Component activated');},deactivated() {console.log('Component deactivated');}
};
这些钩子非常适合在组件需要在激活或停用时执行特定逻辑的场景,如重新加载数据或暂停动画。
四、全局前置路由守卫
4.1 什么是路由守卫?
路由守卫是 Vue Router 提供的一种机制,它允许我们在路由导航发生之前或之后执行一些逻辑,比如权限验证、日志记录或数据预加载。
4.2 定义全局前置守卫
全局前置守卫通过router.beforeEach
方法定义,它会在每次路由导航开始时触发。
const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {console.log('Global Before Each');// 执行一些逻辑,例如权限验证if (to.meta.requiresAuth && !isAuthenticated()) {next('/login'); // 重定向到登录页面} else {next(); // 继续导航}
});
在这个例子中,守卫检查目标路由是否需要认证,如果需要且用户未认证,则重定向到登录页面,否则继续导航。
4.3 next
函数
在路由守卫中,next
函数非常重要,它决定了导航的行为:
next()
:继续导航。next(false)
:中断当前的导航。next('/path')
:跳转到一个新的路径。next(new Error('error message'))
:导航终止,并且会传递一个错误给router.onError()
。
五、全局后置路由守卫
5.1 定义全局后置守卫
全局后置守卫通过router.afterEach
方法定义,它在每次路由导航结束时触发。
router.afterEach((to, from) => {console.log('Global After Each');// 例如,记录页面访问日志
});
与前置守卫不同,后置守卫不接受next
参数,也不会影响导航的进行。它通常用于执行一些与导航结束后相关的逻辑,如记录页面访问、修改页面标题等。
六、总结
通过本文的学习,你应该掌握了以下关键点:
- 编程式路由导航:理解了如何使用
push
和replace
方法在代码中进行路由导航,并掌握了replace
的应用场景。 - 缓存路由组件:学会了使用
<keep-alive>
组件缓存路由组件,理解了activated
和deactivated
生命周期钩子的作用。 - 全局前置路由守卫:掌握了如何使用
beforeEach
方法定义全局前置守卫,并在导航开始时执行权限验证或其他逻辑。 - 全局后置路由守卫:了解了如何使用
afterEach
方法定义全局后置守卫,在导航结束后执行页面日志记录等操作。
这些功能为 Vue.js 应用的路由管理提供了更大的灵活性和控制能力,使得我们能够构建更加复杂和健壮的单页应用。在接下来的博客中,我们将继续深入探讨 Vue Router 的其他高级功能和实际应用场景。如果你有任何疑问或需要进一步讨论,欢迎在评论区留言。感谢你的阅读,期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue Router 的开发技巧与经验!