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