Vue路由守卫

一、全局路由守卫

(一)meta配置项

我们能够在路由组件中配置meta配置项,便于我们存储组件的相关信息(如:该组件展示时的标题名,访问该组件时是否需要权限校验)

meta : { a : xxx, b : xxx }

(二)全局前置路由守卫

该路由守卫会在应用初始化和切换页面时调用。

router.beforeEach( (to, from, next)=>{

// 权限判断

next();

} )

我们能通过to和from参数拿到我们路径跳转的相关信息。

我们在下面的例子中在页面跳转的时候进行权限判断:

注意:使用前置路由和后置路由都要接收VueRouter实例对象然后暴露。

(三)全局后置路由守卫

后置路由守卫在初始化和页面跳转的时候调用。

router.afterEach( (to, from)=>{

// 页面跳转后的操作

})

比如我们可以用来修改路径跳转后的网页标题:

二、独享路由守卫

独享路由守卫就是给一个路由组件单独添加一个路由守卫,在路由组件中进行配置:

beforeEnter(to, from, next) {

// 权限判断

next();

}

其作用和全局前置路由守卫相同,全局前置路由守卫是给所有的组件路由添加路由守卫。

三、组件路由守卫

组件路由守卫就像组件的声明周期函数一样,在进入或离开该组件的时候被调用。

(一)进入路由守卫

进入该组件的时候就会调用进入路由守卫。

beforeRouteEnter (to, from, next) {

// 进去页面前操作

next();

}

(二)离开路由守卫

离开该组件的时候就会调用进入路由守卫。

beforeRouteLeave (to, from, next) {

// 离开页面前操作

next();

}

相关推荐
陈随易7 分钟前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
Dream-Y.ocean2 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn3 小时前
性能监控
前端
Highcharts.js3 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn4 小时前
构建工具
前端
FRing034 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷5 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
kyriewen6 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒7 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫7 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库