vue的路由封装

路由+路由守卫的封装

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home'
import Login from '../views/Login'
import { getToken } from '@/utils/auth'  // token的封装（有添加，删除，查询的功能）

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return routerPush.call(this, location).catch(error => error)
}
Vue.use(VueRouter)

let routes = []
const routerContext = require.context('./', true, /index\.js$/)
routerContext.keys().forEach(route => {
if (route.startsWith('./index')) {
return
}
const routerModule = routerContext(route)
routes = [...routes, ...(routerModule.default || routerModule)]
})

let defaultRoutes = [
// 主页
{
path: '/',
redirect: {
name: 'Home'
}
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
// children: [...routes],
meta: {
isLogin: true // 添加该字段，表示进入这个路由是需要登录的
}// 路由元
}
]
const router = new VueRouter({
// mode: 'history', // 存在页面刷新报404, 我是直接注释掉
base: process.env.BASE_URL,
routes: defaultRoutes
})
// 路由守卫
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.isLogin)) { // 判断是否需要登录
if (getToken()) {
next()
} else {
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
}
} else {
next()
}
})

export default router