wordpress 网站 上传,微信公众平台直接上传wordpress,自建 wordpress,关于网站建设管理的通知目录 一、全局路由守卫二、独享路由守卫三、组件内路由守卫 一、全局路由守卫
作用全局
router.beforeEach全局前置路由守卫—初始化的时候被调用、每次路由切换之前被调用router.afterEach全局后置路由守卫—初始化的时候被调用、每次路由切换之后被调用
配置
// 该文件专… 目录 一、全局路由守卫二、独享路由守卫三、组件内路由守卫 一、全局路由守卫
作用全局
router.beforeEach全局前置路由守卫—初始化的时候被调用、每次路由切换之前被调用router.afterEach全局后置路由守卫—初始化的时候被调用、每次路由切换之后被调用
配置
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message
import Detail from ../pages/Detail//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
二、独享路由守卫
在Vue Router中独享路由守卫是一种路由守卫函数用于在进入或离开特定路由时执行额外的逻辑或验证。独享路由守卫只会应用于特定的路由而不是全局的所有路由。
beforeEnter在创建路由时可以通过在路由配置中定义beforeEnter守卫函数来应用特定的前置逻辑beforeRouteEnter在进入特定路由之前执行但在路由组件实例被创建之前执行。beforeRouteLeave在离开特定路由之前执行用于执行一些离开前的清理逻辑或确认操作。 // 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message
import Detail from ../pages/Detail//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},beforeEnter: (to, from, next) {console.log(独享路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},beforeRouteEnter (to, from, next) {//通过回调函数处理进一步的逻辑next()},beforeRouteLeave (to, from, next) {// 执行清理逻辑// 确认操作或其他逻辑next();}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
三、组件内路由守卫
在Vue中可以利用路由守卫函数来控制在组件内部导航发生前后执行的逻辑。组件内的路由守卫与全局路由守卫相比更专注于组件级别的导航钩子。
beforeRouteEnter在进入路由前被调用。在这个守卫内部无法通过this访问组件实例因为它在组件实例被创建之前调用。但是可以通过回调函数来接收组件实例并在回调函数中访问和操作组件。export default {beforeRouteEnter (to, from, next) {next(vm {// 通过 vm 访问组件实例vm.doSomething();});},methods: {doSomething () {// 处理业务逻辑}}
}beforeRouteUpdate在当前路由被复用但是参数发生变化时调用例如从user/1导航至user/2。可以在该守卫中对组件进行更新操作。beforeRouteLeave在组件离开当前路由前调用。可以使用该守卫来执行离开前的逻辑操作例如保存数据或弹出确认对话框等。 templateh2我是About的内容/h2
/templatescriptexport default {name:About,//通过路由规则进入该组件时被调用beforeRouteEnter (to, from, next) {console.log(About--beforeRouteEnter,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About--beforeRouteLeave,to,from)next()}}
/script
