Vue2系列教程——路由守卫
Vue2 路由守卫1. 全局前置路由守卫方式一:import VueRouter from 'vue-router'const router = new VueRouter({routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../componen
·
Vue2 路由守卫
1. 全局前置路由守卫
方式一:
import VueRouter from 'vue-router'
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../components/Login')
}
]
})
// 全局前置路由守卫,表示在每次切换路由之前调用,针对所有的路由
router.beforeEach((to, from, next)=>{ // to表示去哪个路由,from表示来自哪个路由,next表示放行
// 可加判断条件进行放行
if(to.path !== '/login'){ // 判断要去的路由条件
if(localStorage.getItem('school') !== 'atguigu'){
// 缓存中这个参数如果不是'atguigu'则进入登录重新登陆
// 登录成功把这个值存储在缓存中
next('/login')
} else{
next()
}
}
else{
next()
}
})
export default router
方式二:
import VueRouter from 'vue-router'
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),
meta: {fangxing: true} // 配置路由元信息
}
]
})
router.beforeEach((to, from, next)=>{
// 判断是否需要鉴权
if(to.meta.fangxing){
next()
}
})
export default router
2. 全局后置路由守卫
import VueRouter from 'vue-router'
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),
meta: {title: '登录'}
}
]
})
// 全局后置路由守卫,表示在每次切换路由之后调用,针对所有的路由
router.afterEach((to, from)=>{ // to表示去哪个路由,from表示来自哪个路由,注意这里没有next
document.title = to.meta.title || '测试网站' // 切换网页标题
})
export default router
3. 独享路由守卫
import VueRouter from 'vue-router'
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),
meta: {fangxing: true},
// 独享路由守卫,独享路由守卫只有前置的,没有后置的
beforeEnter: (to, from, next) => {
if(to.meta.fangxing){
next()
}
}
}
]
})
export default router
4. 组件内路由守卫
Login.vue文件中,
<script>
// 通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next){},
// 通过路由规则,离开该组件时被调用
beforeRouteLeave(to, from, next){}
</script>
5. 路由的工作模式
- hash 模式(默认,兼容性好)
hash模式在浏览器地址栏中会出现 “#”,在做网络刷新请求时,“#”后面的不会当作网络地址去请求服务器。 - history 模式(兼容性略差)
histroy模式在浏览器地址栏中不会出现 “#”,但是在做刷新网络请求时就会出错,如果要想解决这一问题,就要后端配合
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history', // 开启history模式
routes: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '../components/Login')
}
]
})
export default router
重启浏览器,即可出现地址栏中没有 “#” 了,
更多推荐
已为社区贡献7条内容
所有评论(0)