记录一下全局路由守卫的使用；
方法一：定义一个数组用于检测与管理需要登录的页面，全局路由守卫配合本地存储判断是否跳转
import Vue from 'vue'
import Router from 'vue-router'
import store from './../store' import Home from 'components/home/home' // 主页组件 // 其它组件... import Cart from 'components/cart/cart' // 购物车组件
import User from 'components/user/user' // 用户中心组件 // 其他组件... import GoodsDetail from 'components/goods-detail/goods-detail' // 商品详情组件 import { localTake } from 'common/js/localStore' // 本地存储方法封装 Vue.use(Router) const router = new Router({
routes: [
{
path: '/', // 默认地址
redirect: '/home'
},
{
path: '/home',
component: Home,
name: 'Home',
meta: {
title: '主页',
keepAlive: true // 需要被缓存
}
},
{
path: '/cart',
component: Cart,
name: 'Cart',
meta: {
title: '购物车',
keepAlive: true // 需要被缓存
}
},
{
path: '/user',
component: User,
name: 'User',
meta: {
title: '我的',
keepAlive: true // 需要被缓存
}
},
{
path: '/user-login',
component: UserLogIn,
name: 'UserLogIn',
meta: {
title: '登录',
keepAlive: false // 不需要被缓存
}
},
{
path: '/goods-detail',
component: GoodsDetail,
name: 'GoodsDetail',
meta: {
title: '商品详情',
keepAlive: true // 需要被缓存
}
}
],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {x: 0, y: 0}
}
}
}) // 全局路由守卫
router.beforeEach((to, from, next) => {
const nextRoute = ['User', 'Cart', 'GoodsDetail'] // 需要登录的页面
let isLogin = localTake('userMsg') // 判断是否登录，本地存储有用户数据则视为已经登录
// 未登录状态；当路由到 nextRoute 指定页时，跳转至 UserLogIn
if (nextRoute.indexOf(to.name) >= 0) { // 检测是否登录的页面
if (!isLogin) { // 如果未登录（本地存储无用户数据），并且要跳到登录页面
if (from.name === 'UserLogIn') {
next('/')
return
}
// 登录后，跳到到当前页面
router.push({
name: 'UserLogIn',
params: {redirect: to.fullPath}
})
}
}
// 已登录状态；当路由到 UserLogIn 时，跳转至 Home
if (to.name === 'UserLogIn') {
if (isLogin) {
next('/')
return
}
}
next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
}) export default router
方法二：通过定义to.meta.needLogin（needLogin 为自定义，路由元信息），判断是否需要登录
import Vue from 'vue'
import Router from 'vue-router'
import store from './../store' import Home from 'components/home/home' // 主页组件 // 其它组件... import Cart from 'components/cart/cart' // 购物车组件
import User from 'components/user/user' // 用户中心组件 // 其他组件... import GoodsDetail from 'components/goods-detail/goods-detail' // 商品详情组件 import { localTake } from 'common/js/localStore' // 本地存储方法封装 Vue.use(Router)
const router = new Router({
routes: [
{
path: '/', // 默认地址
redirect: '/home'
},
{
path: '/home',
component: Home,
name: 'Home',
meta: {
title: '主页',
keepAlive: true // 需要被缓存
}
},
{
path: '/cart',
component: Cart,
name: 'Cart',
meta: {
title: '购物车',
keepAlive: true, // 需要被缓存
needLogin: true // 需要登录
}
},
{
path: '/user',
component: User,
name: 'User',
meta: {
title: '我的',
keepAlive: true, // 需要被缓存
needLogin: true // 需要登录
}
},
{
path: '/user-login',
component: UserLogIn,
name: 'UserLogIn',
meta: {
title: '登录',
keepAlive: false // 不需要被缓存
}
},
{
path: '/goods-detail',
component: GoodsDetail,
name: 'GoodsDetail',
meta: {
title: '商品详情',
keepAlive: true, // 需要被缓存
needLogin: true // 需要登录
}
}
]
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
let isLogin = localTake('userMsg')
if (to.meta.needLogin) { // 判断该路由是否需要登录权限
if (isLogin) { // 判断是否已经登录
next()
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}
else {
next()
}
}) export default router
推荐使用判断路由元信息的方法，代码比较简洁，能更好的维护与管理