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

router.js：全局守卫

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：路由守卫（全局守卫、路由独享守卫、组件内守卫）相关推荐

Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
一.全局守卫 1. router.beforeEach((to,from,next)=>{}) 2. 回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否 ...
路由守卫（全局守卫，局部守卫，组件内守卫）
路由守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫全局守卫: //全局前置守卫:初始化时执行.每次路由切换前执行 router.beforeEach((to,from,next ...
导航守卫之组件内守卫及后置钩子
一.路由守卫 1.只有点击路由Admin时才会打印消息,并处于点击前的页面 2.只有点击路由Admin时才会打印消息,显示的是点击后的页面:但如果是next(false)则页面不会跳转 3.路由独享守 ...
ts写法vue组件内守卫beforeRouteLeave不生效问题
解决办法需要加上下面一行代码 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate' ...
全局路由守卫，独享路由守卫，组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...

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

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

最新文章

热门文章