vue3：路由守卫（全局守卫、路由独享守卫、组件内守卫）

全局守卫

import {
createRouter,
createWebHashHistory
} from 'vue-router'

// 省略了routes 中的路由规则
const routes = [
...
...
]

const router = createRouter({
history: createWebHashHistory(),
routes
})

// 全局守卫：登录拦截 本地没有存token,请重新登录
router.beforeEach((to, from, next) => {
// 判断有没有登录
if (!localStorage.getItem('token')) {
if (to.name == "login") {
next();
} else {
router.push('login')
}
} else {
next();
}
});

export default router

路由独享守卫

{
path: '/admin',
name: 'admin',
component: () => import('../views/mine/admin.vue'),
//beforeEnter(to,form.next)=>{判断是否登陆代码}，点击进入admin也面时，路由独享守卫启用
beforeEnter:(to,form,next)=>{
if (!localStorage.getItem('user')) {
if (to.name == "login") {
next();
} else {
router.push('login')
}
} else {
next();
}
}
},

组件内守卫

有些时候我们需要知道是从那一个页面跳转过来的
然后做一些逻辑处理
比如说：
1、order.vue(订单) -> detail.vue(详情)
2、A.vue(商品详情) -> B.vue(确认订单) -> C.vue(支付成功后跳转订单详情) ->detail.vue(详情)
这个时候我们需要使用beforeRouteEnter 来解决页面返回问题

<template>
<div class="mine">
<van-nav-bar
  title="订单详情"
  left-text="返回"
  left-arrow
  @click-left="goBack"
/>
<h1>从　{{data.routerIndex}}　页面来</h1>
</div>
</template>
<script>
import { useRouter } from 'vue-router'
import { reactive } from 'vue'
export default {
// 组件内守卫
beforeRouteEnter:(to,form,next)=>{
//to 到哪里去
//form 从哪里来
next( vm => {
vm.data.routerIndex = form.name;
})
},
setup(){
const router = useRouter();
var data = reactive({
routerIndex:''
})
let goBack = () =>{
// 如果从C.vue来，则返回router.go(-3),回到A.vue，否则正常返回上级页面
if(data.routerIndex == 'C'){
router.go(-3);
}else{
router.go(-1);
}
}
return{
data,
goBack
}
}
}
</script>

原文来自vue3：路由守卫（全局守卫、路由独享守卫、组件内守卫）_vue3路由守卫-CSDN博客，记录下来方便日后学习。

原文地址：https://blog.csdn.net/aaaa_aaab/article/details/142560175

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！