Vue2系列教程——路由守卫_vue2路由守卫

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

方式二：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4. 组件内路由守卫

Login.vue文件中，

<script>
// 通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next){},

// 通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next){}
</script>
1
2
3
4
5
6
7

5. 路由的工作模式

1. hash 模式（默认，兼容性好）
   hash模式在浏览器地址栏中会出现 “#”，在做网络刷新请求时，“#”后面的不会当作网络地址去请求服务器。
2. 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

重启浏览器，即可出现地址栏中没有 “#” 了，