Vue-CLI3.0项目搭建过程系列三：项目中router路由应用包括路由拦截

项目中我们使用router进行路由管理

router文件夹下创建index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const routerMap = [
    { path: '*', redirect: '/404', hidden: true },
    { path: '/', redirect: '/demo', hidden: true },
    {
        path: '/demo',//访问路径
        name: 'demo',
        component: () => import('@/views/demo/index.vue'),//访问页面
        meta: { title: 'demo' },
        hidden: true
    }
]

export default new Router({
    mode: 'history',
    base: '',
    routes: routerMap
})

main.js里引入router下的index文件

import router from './router'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

在App.vue里加入

<div id="app">
  <router-view/>
</div>

到这里我们已经可以使用router-》index.js里配置的路由来进行跳转了

实际项目中我们会有很多模块，每个模块下面可能有多个页面，为了管理方便也更直观，在router下新建modules文件夹，在里面单独存放每个模块的路由js文件，例如我们建一个exception.js来存放403、404、500这样的报错页面

相应的vue页面也要在views文件夹下新建exception文件存放403、404、500页面

exception.js里写：

const exceptionRouters = [
    {
        path: '/403',
        name: 'Page403',
        component: () => import('@/views/exception/403.vue'),
        meta: { title: '403' },
        hidden: true
    },
    {
        path: '/404',
        name: 'Page404',
        component: () => import('@/views/exception/404.vue'),
        meta: { title: '404' },
        hidden: true
    },
    {
        path: '/500',
        name: 'Page500',
        component: () => import('@/views/exception/500.vue'),
        meta: { title: '500' },
        hidden: true
    }
]

export default exceptionRouters

router->index.js文件改为

import Vue from 'vue'
import Router from 'vue-router'
import exceptionRouters from './modules/exception'

Vue.use(Router)

export const routerMap = [
    {
        path: '/demo',
        name: 'demo',
        component: () => import('@/views/demo/index.vue'),
        meta: { title: 'demo' },
        hidden: true
    },
    ...exceptionRouters
]

export default new Router({
    mode: 'history',
    base: '/vue-cli3-demo/',//设置这里正式访问路径变为：http://127.0.0.1:8080/vue-cli3-demo/demo
    routes: routerMap
})

接下来做路由拦截：在跳转到下一个页面之前我们可能需要做一些操作（判断是否登录状态、页面是否可访问、用户权限等）

router下新建interceptor.js

import router from './index'
import store from './../store'

// 设置白名单
const whiteList = ['/403', '/404', '/500']

// 截取参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    if (r !== null) return unescape(r[2]); return null
}

// 路由拦截
router.beforeEach((to, from, next) => {
    if (whiteList.indexOf(to.path) !== -1) { // 检测是否为白名单
        next()
    } else {
        // 是否是登陆状态-单点登录请求用户是否登录接口-》后台返回登陆页面地址或者已登陆的状态
        // 这里看具体项目中如何判断当前是否登录状态（我们之前的项目是发送token到接口返回登录状态），这里我们暂用下面的方式
        // 除了登录还可以做其他操作，具体看项目需要
        if (!store.getters.isLogin) {// 未登陆
            next('/login')
        } else {
            if (to.path === '/login' || to.path === '/') {
                next('/index')
            } else {
                next()
            }
        }
    }
})

mian.js文件引入interceptor.js

import './router/interceptor'