路由守卫,可以想象为古代御前侍卫,路由守卫,则是对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
文章目录
- 1.全局前置-路由守卫
- 2.全局后置守卫
- 3.独享守卫
- 4.组件内路由守卫
- 5.keep-alive遇见vue-router
- 6.路由器的两种工作模式,history模式与hash模式
1.全局前置-路由守卫
作用:主要用来鉴权
用户点击导航区,随后引起路径的改变,前端路由器监测到,进行规则的匹配,在合适的位置呈现组件。
调用时机:初始化时被调用,每次路由切换之前调用
写法:
router.beforeEach((to, from, next) => {// 判断当前路由是否需要进行权限控制if (to.meta.isAuth) {// 权限控制规则if (localStorage.getItem('token')) {next() // 放行}} else if (to.path == '/home') {next()} else {console.log('暂无权限')}
})
to:即将要进入的目标路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子
2.全局后置守卫
主要作用:变更页签标题
调用时机:初始化被调用,每次路由切换之后调用
router.afterEach((to, from) => {document.title = to.meta.title
})
可以在钩子当中定义一些标题,利用meta来定义
const routes = [{path:'/index',component:Home,meta:{title:"首页"}},{path:"/about",component:About,meta:{title:"关于"}}
]
// 利用导航守卫。修改我们的标题
router.afterEach((to, from) => {document.title = to.meta.title
})
3.独享守卫
对某一个路由单独进行控制的守卫
const routes = [{path: "/system",name: "System",component: () => import(/* webpackChunkName: "system" */ "@/views/System"),beforeEnter: (to, from, next) => {if(to.meta.isAuth) {if(localStorage.getItem("token")){next()}} else {console.log("暂无权限");}}},
]
4.组件内路由守卫
beforeRouteEnter、beforeRouteLeave
调用时机:通过路由规则,beforeRouteEnter进入该组件时被调用,beforeRouteLeave离开该组件时被调用
// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from,next){},
// 进入守卫,通过路由规则,离开该组件时被调用
beforeRouteLeave(to,from,next){}
5.keep-alive遇见vue-router
keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态或避免重新渲染
- include:字符串或正则表达,只有匹配的组件会被缓存
- exclude:字符串或正则表达式,匹配的组件都不会被缓存
router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配的视图组件都会被缓存
<keep-alive><router-view>// 所有路径匹配到的视图组件会被缓存</router-view>
</keep-alive>
6.路由器的两种工作模式,history模式与hash模式
hash模式:
-
地址永远带着#号,不美观
-
如果以后将地址通过第三方手机app分享,app校验严格,则地址会被标记为不合法
-
兼容性好。
history模式:
-
这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
-
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id
-
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。
-
地址干净,美观
-
兼容性和hash模式相比略差,IE9不兼容(可使用强制刷新处理)
-
应用部署上线时,需要后端人员支持,解决刷新页面服务端404问题。
const router = new VueRouter({routes,mode:'history'
})