一、項目

vue項目使用@vue/cli 4.0.5搭建，并安裝了router路由

二、路由配置

打開src/router/index.js，配置路由：

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

Vue.use(Router)

const router = new Router({
  routes: [
    // 登錄
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login'),
      meta: { title: '登錄' }
    },
    // 頁面框架
    {
      path: '/',
      component: () => import('@/views/layout'),
      children: [
        // 首頁
        {
          path: '/',
          name: 'home',
          meta: {
            title: "首頁",
            icon: "home"
          },
          component: () => import('@/views/home')
        },
        // 內容框架
        {
          path: '',
          component: () => import('@/views/layout/body'),
          children: [
            // 配電設施
            {
              path: '/facilities',
              name: 'facilities',
              meta: {
                title: "開關站",
                icon: "tool"
              },
              component: () => import('@/views/facilities')
            },
            // 校區(qū)統(tǒng)計
            {
              path: '/campus',
              name: 'campus',
              meta: {
                title: "校區(qū)統(tǒng)計",
                icon: "gold"
              },
              component: () => import('@/views/statistics/campus')
            },
            // 配電設施統(tǒng)計
            {
              path: '/facilSta',
              name: 'facilSta',
              meta: {
                title: "開關站統(tǒng)計",
                icon: "tool"
              },
              component: () => import('@/views/statistics/facilSta')
            },
            // 電表統(tǒng)計
            {
              path: '/surface',
              name: 'surface',
              meta: {
                title: "電表統(tǒng)計",
                icon: "dashboard"
              },
              component: () => import('@/views/statistics/surface')
            }
          ]
        }
      ]
    },
  ]
})

// 導航守衛(wèi)
// 使用 router.beforeEach 注冊一個全局前置守衛(wèi)赖临，判斷用戶是否登陸
router.beforeEach((to, from, next) => {
  let id = localStorage.getItem('token');  //獲取緩存中的用戶 token
  if (to.path === '/login') {
    if (id && id != '') {
      next('/');
    }
    next();
  } else {
    if (id === 'null' || id === '' || !id) {
      next('/login');
    } else {
      next();
    }
  }
});

export default router