vue中，动态菜单-NavMenu导航菜单——el-menu动态导航菜单(一)

vue中，动态菜单-NavMenu导航菜单——el-menu动态导航菜单(一)

效果

代码

1、路由文件

src\router\dataProduct.js

// 数据产品(DDS)模块路由配置
export default [
    // 产品列表
    {
        name: 'dataProduct',
        path: '/console/dataProduct',  // 数据产品-产品列表文件
        component: () => import('@/views/dataProduct/productList/ProductList.vue')
    },
    {
        name: 'copyDataProduct',
        path: '/console/copyDataProduct',
        component: () => import('@/views/dataProduct/productList/CopyProduct.vue')
    },
    // 图层管理
    {
        name: 'dataProductLayerList',
        path: '/console/dataProductLayerList',
        component: () => import('@/views/dataProduct/layerManage/LayerList.vue')
    },
    {
        name: 'dataProductLayerAdd',
        path: '/console/dataProductLayerAdd',
        component: () => import('@/views/dataProduct/layerManage/LayerAdd.vue')
    }
]

2、引入路由文件

src\router\index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store/index';
import { Message } from 'element-ui';

// 导入子路由模块
import dataProduct from './dataProduct'

Vue.use(VueRouter);
// 配置路由
const router = new VueRouter({
  routes: [
    // 重定向:使首次进入页面显示monitorView
    {
      path: '/',
      redirect: '/home'
    },
    {
      name: 'home',
      path: '/home',
      component: () => import('@/views/home.vue')
    },
    {
      name: 'login',
      path: '/login',
      component: () => import('@/views/login.vue')
    },
    {
      path: '/console',   // pagesView主页面路由
      component: () => import('@/components/console/pagesView.vue'),  
      children: [
        {
          name: 'appCenter',
          path: '/console/appCenter',
          component: () => import('@/views/appCenter.vue')
        },
        ...dataProduct,  // 数据产品路由
        {
          name: 'addAuthorize',
          path: '/console/addAuthorize',
          component: () => import('@/components/console/authorize/AddAuthorize.vue')
        }
      ]
    }
  ]
});    

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

// 增加路由守卫,未获取token则跳转到登录页
router.beforeEach((to, from, next) => {
  if (store.state.token) { // 存在token,正常跳转
    next();
  } else { // 不存在token
    if (to.path === '/login' || to.path === '/home' || to.path === '/downApp') {
      next();
    } else {
      Message({
        message: 'token不存在，请先登录',
        type: 'error',
        duration: 2000
      });
      next('/login');
    }
  }
})

export default router;

3、main.js文件

src\main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import echarts from 'echarts';
import Axios from 'axios';
// 入口文件为 src/App.vue 文件
import App from './App.vue'
// 引用路由配置文件
import router from './router';
// 引入vuex的store
import store from './store/index';

import "./api/ajax";

import '@/style/mapContainer.css';
import '@/style/environmentalStat.scss';
import '@/style/popup.css';
import '@/style/datepicker.css';
import '@/style/vue-toasted.min.css';

Vue.prototype.$echarts = echarts;
Vue.prototype.$EventBus = new Vue();
Vue.use(ElementUI);

// 创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上
export const app = new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {App}
})