vue3 setup 语法糖下的路由守卫 beforeRouteEnter 用法示例
2023-09-11 14:16:38 时间
补充:其实用 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