关键词搜索

源码搜索 ×
×

Vue 独享路由守卫

发布2023-04-05浏览307次

详情内容

Vue 独享路由守卫

独享路由守卫是单个路由享用的路由守卫

beforeEnter:(to,from,next)=>{ }

路由配置router->index.js编写代码

//引入文件,该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/Home'
import Home from '../components/About'
import Message from '../components/Message'
import Detail from '../components/Detail'
//创建并暴露一个路由器
const router = new VueRouter({
    routes: [
    	{
            name:'about',
            path: '/about',
            component: About
        },
        {
            name:'home',
            path: '/home',
            component: Home,
            //独享前置路由守卫
            beforeEnter:(to,from,next)=>{
            //逻辑和全局路由配置一样
            //to是你要跳转到那个路由组件
			//from是你从哪个路由组件跳转过来的
			//可以在next()前设置条件,当符合条件就放行,比如:
				if(localStorage.getItem('school')==='atguigu'){
						next()
					}
            }
            children: [{
            	name:'message/:id/:title', //占位符
                path: "message",
                component: Message
            }]
        }
    ]
})


//独享路由守卫没有后置守卫,可以直接使用全局后置守卫

//全局后置-路由守卫----初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{      //注意全局后置-路由守卫没有next

})


export default router

    相关技术文章

    点击QQ咨询
    开通会员
    返回顶部
    ×
    微信扫码支付
    微信扫码支付
    确定支付下载
    请使用微信描二维码支付
    ×

    提示信息

    ×

    选择支付方式

    • 微信支付
    • 支付宝付款
    确定支付下载