vue修饰符&适用场景
vue修饰符大致分为5类：表单修饰符，事件修饰符，鼠标修饰符，键盘修饰符，v-bind修饰符
路由守卫
全局路由守卫：beforeEach（全局前置守卫），afterEach（全局后置守卫）
作用范围是：所有路由
beforeEach（全局前置守卫）调用：
1、组件初始化时调用；
2、每次路由切换之前调用，A切换至B，B还没有呈现时调用
//全局前置守卫
router.beforeEach((to,from,next) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象 =》路由B//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象 =〉路由A//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})afterEach（全局后置守卫）调用：
1、组件初始化时调用；
2、每次路由切换之后调用，A切换至B，B呈现时调用
应用（设置系统内tab页签）
router.afterEach((to,from) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象 =》路由B//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象 =》路由A
}独享守卫：beforeEnter
进入组件时，被调用
应用：单个组件权限控制
// 该文件专门用于穿件整个应用的路由器
import VueRouter from 'vue-router'// 创建一个路由器
const router = new VueRouter({ routes:[{ name:'home',path:'/home',meta:{// 是否授权isAuth:true,title:'首页',permissionKey:'home',},component: () => import("@/pages/home"), // 组件路径beforeEnter:(to,from,next)=>{const {meta} = to// 判断是否需要鉴定一下权限if(meta.isAuth){if(localStorage.getItem('permissionList' ).includes(meta.permissionKey)){next()}else{alert(`无权限查看${meta.title}`)}}else{next()}}}
]
})
组件内守卫：beforeRouteEnter，beforeRouteLeave
beforeRouteEnter：进入组件内被调用，
beforeRouteLeave：离开组件时，应用：取消组件内一些操作
<template><div>测试组件内守卫</div>
</template>
<script>
export default {data() {return {name:'这是一个组件'}},beforeRouteEnter(to, from, next) {next((vm) => {console.log("thisInBeforeRouteEnterNext", this); // undefinedconsole.log("vm", vm);console.log("dataDataInBeforeRouteEnter ", vm.name);console.log(vm.getName());});},beforeRouteLeave(to, from, next) {// 离开时},mounted(){},methods:{getName(){return `组件名字${this.name}`}},
}
</script>
<style scoped></style>
应用：菜单（路由）权限
设置系统内tab页签
// 该文件专门用于穿件整个应用的路由器
import VueRouter from 'vue-router'import store from '@/store';// 创建一个路由器
const router = new VueRouter({ routes:[{ name:'home',path:'/home',meta:{// 是否授权isAuth:true,permissionKey:'home',title:'首页'},component: () => import("@/pages/home"), // 组件路径}
]
})router.beforeEach((to,from,next)=>{const {meta} = to// 判断是否需要鉴定一下权限if(meta.isAuth){if(localStorage.getItem('permissionList' ).includes(meta.permissionKey)){next()}else{alert(`无权限查看${meta.title}`)}}else{next()}})
router.afterEach((to) => {store.commit('system/setPageTabs',to); // 把打开页面的放到页面标签数据中
})
export default router
