渭南市网站建设,镇江网站公司,网站建设需求说明文档,外贸网站开发公司路由守卫#xff1a;路由进行权限控制。
分为#xff1a;全局守卫#xff0c;独享守卫#xff0c;组件内守卫。
全局守卫
//创建并暴露 路由器
const routernew Vrouter({mode:hash//hash路径出现#但是兼容性强#xff0c;history没有#兼容性差路由进行权限控制。
分为全局守卫独享守卫组件内守卫。
全局守卫
//创建并暴露 路由器
const routernew Vrouter({mode:hash//hash路径出现#但是兼容性强history没有#兼容性差routes:[{name:banji,//命名路由,:to{namebanji}path:/class, //当路径是 /class时内容区就显示ClassPage这个组件。component:ClassPage,//上面的引用meta:{title:信息}//{}中自定义信息},{path:/student,component:StudentPage,children:[//嵌套路由{name:banji,path:/class,component:ClassPage,meta:{title:信息}}]}]
});
//暴露之前添加守卫//全局的路由前置守卫处理可否去到目标组件。to,form 都有详细的【去来】信息
router.beforeEach((to,from,next){//to:去哪//from:从哪来document.titlefrom.meta.title;//读信息//next()//放行让不让跳转
})//全局的路由后置守卫处理到达组件之后的操作
router.afterEach((to,from){//to:去哪//from:从哪来
})//暴露路由
export default router;
独享守卫
//创建并暴露 路由器
const routernew Vrouter({routes:[{path:/student,component:StudentPage,children:[//嵌套路由{....}],beforeEnter:(to,from,next){...}//****独享路由守卫里面与全局一样}]
});
//暴露路由
export default router;
组件内守卫
//组件里面的路由守卫
export default {name:组件名,data(){return{属性:值}},props:[参数],//***进入组件时的守卫通过路由规则进入的作用有点类似全局守卫。to,form 都有详细的【去来】信息router.beforeEach((to,from,next){//to:去哪//from:从哪来document.titlefrom.meta.title;//读信息//next()允许进来})//离开组件时的守卫处理到达组件之后的操作router.afterEach((to,from,next){//to:去哪//from:从哪来//next()允许出去})
}
