有关router.beforeEach()路由页面限制

        router.beforeEach() 也就可以叫全局前置守卫，主要在路由页面跳转前做的一些操作，最常用的场景：例如用户登录检验，没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面，说白了就是路由拦截。

  主要分为四个步骤：1、npm命令引入router  2、route配置    3、在permission.js文件配置router.beforeEach()   4、main.js引入

 1、npm命令引入router

npm install vue-router@4

   2、route配置

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

import index from '../pages/index.vue'
import NotFound from '../pages/404.vue'
import LonginPage from '../pages/longin/longin_page.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: index
    },
    {
      path: '/LonginPage',
      name: 'LonginPage',
      component: LonginPage
    },
    { 
      path: '/:pathMatch(.*)*', 
      name: 'NotFound', 
      component: NotFound},
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

3、在permission.js文件配置router.beforeEach() 

import router from "~/router"
import { getToken } from "~/composables/auth"
import { toast } from "~/composables/util"


// 全局前置守卫
router.beforeEach((to,from,next)=>{

    const token = getToken()

    // 没有登录，强制跳转回登录页
    if(!token && to.path != "/LonginPage"){
        toast("请先登录","error")
        return next({ path:"/LonginPage" })
    }

    // 防止重复登录
    if(token && to.path == "/LonginPage"){
        toast("请勿重复登录","error")
        return next({ path:from.path ? from.path : "/" })
    }

    next()
})

4、main.js引入

import './permission'