vue3 setup 语法糖下的路由守卫 beforeRouteEnter 用法示例

补充：其实用 useRouter 也可以实现

import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'

// useRouter
const $router = useRouter()

// 路由拦截器
$router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
    next()
})

 vue3 setup 语法糖下的路由守卫 beforeRouteEnter 用法示例 

需要依赖 unplugin-vue-define-options/vite 插件

import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'

// vue3 setup 语法糖下的路由守卫 beforeRouteEnter 用法示例 
defineOptions({
    name: 'peopleAdd',
    beforeRouteEnter: (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
        console.log('salesOrder beforeRouteEnter', to, from)

        // 说明用户是通过刷新的方式进入的
        if (from.name === undefined) {

        }

        next()
    }
})

 

vite.config.js

$ pnpm i unplugin-vue-define-options

// Vue3.2 setup语法糖中组件的 name 属性如何定义: https://blog.csdn.net/m0_66051368/article/details/126281743
import DefineOptions from 'unplugin-vue-define-options/vite'

// 配置插件
plugins: [DefineOptions()]

 

defineOptions