路由

说明

vue 路由 官方文档 (opens new window)，在阅读本文档前，请对 vue-router 的使用有了解。

本项目的路由以 router.addRoute() (opens new window) 形式通过接口动态加载。

目录结构

└─ src                            # 项目主文件
   └─ router                      # 路由文件夹
      ├─ index.js                 # 路由主文件
      ├─ promission.js            # 路由动态加载
      ├─ _import_development.js   # 开发环境引入组件方式
      └─ _import_production.js    # 生产环境引入组件方式

index.js 文件

路由入口文件，只有登录和404两个固定路由，其它路由由 addRoute 方法添加。

import Vue from "vue";
import Router from "vue-router";
import Login from "@/pages/login";  // 登录页
import NotFound from "@/pages/404"; // 404页

Vue.use(Router);

const constantRoutes = [
  {
    path: "/",
    redirect: "/login", // 重定向到登录页
  },
  {
    path: "/login",
    component: Login,
  },
  {
    path: "*",
    component: NotFound, // 无匹配路由则进入 404 页面
  },
];

export default new Router({
  mode: "history",
  linkActiveClass: "is-active",
  linkExactActiveClass: "is-active",
  base: __dirname,
  routes: constantRoutes,
});

promission.js 文件

动态加载路由方法，该文件在 main.js 中引入，以使每次刷新页面时都会执行。 该路由添加方法在 login.vue 中也执行了一次，待后期优化合并。

const _import = require('./_import_' + process.env.NODE_ENV)//引入组件方式

import router from "@/router/index"
import Layout from '@/pages/Layout'
import store from '@/store/index'

// 无菜单时则不执行，通常为未登录状态。
if (store.state.user.menus && Array.isArray(store.state.user.menus)) {
  const routes = store.state.user.menus
  let asyncRoutes = filterAsyncRouter(routes) //过滤路由
  let isAdd = false;
  if (!isAdd) {
    router.addRoutes(asyncRoutes)   //动态添加路由
  };

  isAdd = true
}

// 处理接口获取的路由文件
function filterAsyncRouter(asyncRoutes) {   
  //遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = asyncRoutes.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {   //Layout组件特殊处理
        route.component = Layout
      } else {
        route.component = _import(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })

  return accessedRouters
}