Vue-CLI3.0 project construction process series three: router routing application in the project includes routing interception

In the project, we use router for routing management

Create index.js under the router folder

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
})

Introduce the index file under router in main.js

import router from './router'

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

Add in App.vue

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

At this point, we can already use the route configured in router-"index.js to jump

In the actual project, we will have many modules, and each module may have multiple pages. For the convenience of management and more intuitive, create a new modules folder under the router, and store the routing js file of each module separately in it. For example, we build an exception.js to store error pages such as 403, 404, and 500

The corresponding vue page should also create a new exception file under the views folder to store 403, 404, 500 pages

Write in 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

The router->index.js file is changed to

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
})

Next, do routing interception: we may need to do some operations before jumping to the next page (judging whether to log in, whether the page is accessible, user permissions, etc.)

Create new interceptor.js under router

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()
            }
        }
    }
})

The mian.js file introduces interceptor.js

import './router/interceptor'