1、全局的钩子
beforeEach(to,form,next)
afterEach(to,form,next)
2、组件内的导航钩子
组件内的导航勾走i主要有这三种:beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave,它们是直接在路由组件内部直接进行定义的
methods: {},
beforeRouteLeave (to, from, next) {}
(需要注意的是,beforeRouteEnter 不能获取组件实例 this,因为当守卫执行前,组件实例还没有被创建,剩下的两个钩子则可以正常获取组件实例this)
beforeRouteEnter获取到this实例
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
相关概念:
1、导航
2、守卫
...
const router = new Router({
mode: "hash",
base: process.env.BASE_URL,
routes: [
{
path: "/",
redirect: "index"
},
// 首页
{
path: "/index",
name: "Index",
component: () => import("@/views/Index/Index.vue"),
meta: {
showBaseTabbar: true,
needLogin: false,
requireAuth: true,
name: "首页"
}
},
{
path: "/login/loginDeny",
name: "logindeny",
component: () => import("@/views/Index/LoginDeny.vue"),
meta: {
showBaseTabbar: true,
needLogin: false,
name: "登录失败"
}
},
....
{
path: "/batchProvideCoupon",
name: "BatchProvideCoupon",
component: () =>
import("@/views/BatchProvideCoupon/BatchProvideCoupon.vue"),
meta: {
showBaseTabbar: false,
needLogin: false,
requireAuth: false,
name: "xxx"
}
}
// 判断是否有 openID router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限 if (window.localStorage.getItem('openID')) { next(); } else { next({ path: "/login/loginDeny" }); } } else { next(); } });
‘Maximum call stack size exceeded’ 解决
错误的字面意思是:超出最大调用堆栈大小。
这种错误的产生情况可能是router里面路径未声明,变量未定义,递归函数产生死循环。
在这次开发项目的过程中,我出现了这么情况,原因是判断没有openID时,跳入登录失败页面,登录页面又需要登陆权限,没有openID时又进入登陆失败页面,进入死循环。