网络推广营销培训机构_绵阳吉工建设_运用搜索引擎营销的案例_长沙好的seo外包公司

全局守卫

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-bartitle="订单详情"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博客，记录下来方便日后学习。