beforeEach

2023年05月24日

柏拉文

越努力，越幸运

一、认识

---

beforeEach 全局前置守卫

二、语法

---

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL)
})

function canUserAccess(to: RouteLocationNormalized){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve(true);
    },3000);
  });
}

router.beforeEach(async (to,from)=>{
  const canAccess = await canUserAccess(to);
  if(canAccess){
    return true; // return true 继续导航  || return false 中断导航
  }
  return '/login' 
  // 或者 
  return { name: "Login" }
  // 或者
  return { path: "/login" }
});

export default router

三、参数

---

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

});

3.1 to

to 即将要进入的目标 用一种标准化的方式

3.2 from

from 当前导航正要离开的路由 用一种标准化的方式

3.3 next

next

四、返回值

---

4.1 布尔值

router.beforeEach((to,from)=>{
  return false / true;
});

4.2 基础路由

router.beforeEach((to,from)=>{
  return "/path"
});

4.3 命名路由

router.beforeEach((to,from)=>{
  return { name: "" }
});

4.4 路径路由

router.beforeEach((to,from)=>{
  return { path: "" }
});

五、应用场景

---