🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ### 路由全局前置守卫 * [ ] 作用: 页面进入之前的逻辑判断 * [ ] 定义:router.js ``` import Vue from 'vue' import Router from 'vue-router' import routes from './router' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes }) /** * 路由前置全局守卫 * @params to 当前路由对象 * @params from 上一次访问的路由对象 * @params next 向下执行 */ router.beforeEach( (to, from, next) => { }) export default router ``` ***** ### 路由全局后置守卫 * [ ] 作用:页面跳转之后的操作,例如用户访问页面之前有Loading效果,访问页面之后,可以用该钩子函数结束Loading效果 * [ ] 定义:router.js ``` import Vue from 'vue' import Router from 'vue-router' import routes from './router' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes }) /** * 路由前置全局守卫 页面进入之前处理逻辑 * @params to 即将跳转的路由对象 * @params from 即将离开的路由对象 * @params next 跳转函数 */ router.beforeEach( (to, from, next) => { }) /** * 路由跳转之后的操作 * @params to * @params from */ router.afterEach( (to, from) => { // 用户页面跳转之后的简单逻辑判断,比如关闭loading效果 }) export default router ```