Skip to content

Commit b3d19c3

Browse files
author
linjian
committed
[v1.0.0] update 静态固定路由修改为 =>根据路由渲染动态菜单
1 parent 709fe4e commit b3d19c3

File tree

13 files changed

+280
-329
lines changed

13 files changed

+280
-329
lines changed

‎src/assets/less/nav.less‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* 导航样式 */
2+
.el-menu {
3+
height: 100%;
4+
overflow: auto;
5+
background: #304156;
6+
}
7+
.el-menu-item,.el-submenu__title {
8+
height: auto !important;
9+
}
10+
.el-submenu {
11+
background: rgb(48, 65, 86);
12+
.el-submenu__title {
13+
color: rgb(191, 203, 217);
14+
text-align: left;
15+
&:hover {
16+
background: #001528 !important;
17+
}
18+
}
19+
}
20+
.el-menu-item {
21+
background: #1f2d3d !important;
22+
color: rgb(191, 203, 217) !important;
23+
text-align: left;
24+
&:hover {
25+
background: #001528 !important;
26+
}
27+
}
28+
.el-submenu .el-submenu__title {
29+
color: #bfcbd9;
30+
}
31+
.el-menu-item.is-active {
32+
color: #1890ff !important;
33+
}
34+
.el-submenu__title i {
35+
color: #bfcbd9 !important;
36+
font-size: 18px;
37+
}
38+
.el-menu-item [class^="fa"],
39+
.el-submenu [class^="fa"] {
40+
vertical-align: middle;
41+
margin-right: 10px;
42+
}

‎src/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Object.keys(filters).forEach(key => {
1212
import ElementUI from 'element-ui'
1313
import 'element-ui/lib/theme-chalk/index.css'
1414
import './assets/css/base.css' //基础样式
15+
import './assets/less/nav.less' //导航样式
1516

1617
import Api from './api/api' //导入api接口
1718
import Axios from './request/http' //导入axios请求

‎src/router/index.1.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
4+
/**
5+
* 官方 component: () => import('../views/login/Login')
6+
* webpack懒加载 component: r => require.ensure([], () => r(require('../views/login/Login')), 'Login'),
7+
* import加载所有 import Login from '../views/login/Login'
8+
*/
9+
10+
Vue.use(VueRouter)
11+
12+
const routes = [
13+
{
14+
path: '/',
15+
name: 'login',
16+
component: () => import('../views/login/Login'),
17+
meta: {
18+
keepAlive: false,
19+
title: '登录'
20+
}
21+
},
22+
{
23+
path: '*',//输错路由前往404
24+
redirect: '/404',
25+
meta: {
26+
keepAlive: false,
27+
title: '404'
28+
}
29+
},
30+
{
31+
path: '/404',
32+
name: 'notFound',
33+
component: () => import('../views/error/NotFound'),
34+
meta: {
35+
keepAlive: false,
36+
title: '404'
37+
}
38+
},
39+
{
40+
path: '/home',
41+
name: 'home',
42+
redirect: '/summary',
43+
component: () => import('../views/home/Index'),
44+
meta: {
45+
keepAlive: false,
46+
title: '首页'
47+
},
48+
children: [
49+
{
50+
path: '/summary',
51+
name: 'summary',
52+
// route level code-splitting
53+
// this generates a separate chunk (about.[hash].js) for this route
54+
// which is lazy-loaded when the route is visited.
55+
component: () => import('../views/Summary'),
56+
meta: {//缓存、路由元信息、元字段
57+
keepAlive: false,
58+
title: '概述',
59+
//requiresAuth: true
60+
}
61+
},
62+
{
63+
path: '/doc',
64+
name: 'doc',
65+
component: () => import('../views/Doc'),
66+
meta: {
67+
keepAlive: false,
68+
title: '文档'
69+
}
70+
},
71+
{
72+
path: '/good-list',
73+
name: 'goodList',
74+
component: () => import('../views/good-list/GoodList'),
75+
meta: {
76+
keepAlive: false,
77+
title: '商品列表'
78+
},
79+
children: []
80+
},
81+
{
82+
path: '/good-list/good-detail',
83+
name: 'goodDetail',
84+
component: () => import('../views/good-list/GoodDetail'),
85+
meta: {
86+
keepAlive: false,
87+
title: '商品详情',
88+
parentPath: '/good-list',
89+
parentTitle: '商品列表'
90+
}
91+
}
92+
]
93+
}
94+
]
95+
96+
const router = new VueRouter({
97+
// mode: 'history',
98+
base: process.env.BASE_URL,
99+
routes
100+
})
101+
export default router

‎src/router/index.js‎

Lines changed: 90 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,129 @@
1-
import Vue from 'vue'
2-
import VueRouter from 'vue-router'
3-
4-
/**
5-
* 官方 component: () => import('../views/login/Login')
6-
* webpack懒加载 component: r => require.ensure([], () => r(require('../views/login/Login')), 'Login'),
7-
* import加载所有 import Login from '../views/login/Login'
8-
*/
9-
10-
Vue.use(VueRouter)
1+
import Vue from "vue";
2+
import VueRouter from "vue-router";
3+
import Home from "../views/Home.vue";
4+
Vue.use(VueRouter);
115

126
const routes = [
137
{
14-
path: '/',
15-
name: 'login',
16-
component: () => import('../views/login/Login'),
8+
path: "*", //输错路由回首页
9+
redirect: "/404",
10+
hidden: true,
1711
meta: {
12+
title: "输错路由回首页",
1813
keepAlive: false,
19-
title: '登录'
14+
level: 0 //判断是否缓存 0为不缓存 1为缓存 2为详情页
2015
}
2116
},
2217
{
23-
path: '*',//输错路由前往404
24-
redirect: '/404',
18+
path: "/", //默认路由
19+
redirect: "/login",
20+
hidden: true,
2521
meta: {
22+
title: "默认路由",
2623
keepAlive: false,
27-
title: '404'
24+
level: 0
2825
}
2926
},
27+
//登录
3028
{
31-
path: '/404',
32-
name: 'notFound',
33-
component: () => import('../views/error/NotFound'),
29+
path: "/login",
30+
name: "login",
31+
component: r => require.ensure([], () => r(require("../views/login/Login.vue")), "Login"),
32+
hidden: true,
3433
meta: {
34+
title: "登录",
3535
keepAlive: false,
36-
title: '404'
36+
level: 0
3737
}
3838
},
39+
//404
3940
{
40-
path: '/home',
41-
name: 'home',
42-
redirect: '/summary',
43-
component: () => import('../views/home/Index'),
41+
path: "/404",
42+
name: "notFound",
43+
component: r => require.ensure([], () => r(require("../views/error/NotFound.vue")), "NotFound"),
44+
hidden: true,
4445
meta: {
46+
title: "404",
4547
keepAlive: false,
46-
title: '首页'
47-
},
48+
level: 0
49+
}
50+
},
51+
{
52+
path: "/home",
53+
name: "home",
54+
component: Home,
55+
redirect: '/summarys/index',
56+
hidden: true,
57+
meta: {
58+
title: "首页",
59+
keepAlive: false,
60+
level: 0
61+
}
62+
},
63+
{
64+
path: "/summarys",
65+
component: Home,
66+
iconCls: "fa el-icon-s-data",
67+
hidden: false,
68+
meta: {
69+
title: "简介",
70+
keepAlive: false,
71+
level: 0
72+
},
4873
children: [
4974
{
50-
path: '/summary',
51-
name: 'summary',
52-
// route level code-splitting
53-
// this generates a separate chunk (about.[hash].js) for this route
54-
// which is lazy-loaded when the route is visited.
55-
component: () => import('../views/Summary'),
56-
meta: {//缓存、路由元信息、元字段
57-
keepAlive: false,
58-
title: '概述',
59-
//requiresAuth: true
60-
}
61-
},
62-
{
63-
path: '/doc',
64-
name: 'doc',
65-
component: () => import('../views/Doc'),
75+
path: "/summarys/index",
76+
component: () => import("../views/summarys/index.vue"),
77+
name: "summarys",
78+
hidden: false,
6679
meta: {
67-
keepAlive: false,
68-
title: '文档'
80+
title: "简介首页",
81+
keepAlive: false,
82+
level: 0
6983
}
7084
},
7185
{
72-
path: '/good-list',
73-
name: 'goodList',
74-
component: () => import('../views/good-list/GoodList'),
86+
path: "/goods/goodsList",
87+
component: () => import("../views/goods/goodsList.vue"),
88+
name: "goodsList",
89+
hidden: false,
7590
meta: {
76-
keepAlive: false,
77-
title: '商品列表'
78-
},
79-
children: []
91+
title: "商品列表",
92+
keepAlive: false,
93+
level: 0
94+
}
8095
},
8196
{
82-
path: '/good-list/good-detail',
83-
name: 'goodDetail',
84-
component: () => import('../views/good-list/GoodDetail'),
97+
path: "/goods/goodsList/goodsDetail",
98+
component: () => import("../views/goods/goodsDetail.vue"),
99+
name: "goodsDetail",
100+
hidden: true,
85101
meta: {
86-
keepAlive: false,
87-
title: '商品详情',
88-
parentPath: '/good-list',
89-
parentTitle: '商品列表'
102+
title: "商品列表",
103+
parentPath: "/goods/goodsList",
104+
parentTitle: "商品列表",
105+
keepAlive: false,
106+
level: 0
90107
}
91108
}
92109
]
93110
}
94111
]
95112

96113
const router = new VueRouter({
97-
// mode: 'history',
114+
mode: "history",
98115
base: process.env.BASE_URL,
99116
routes
100-
})
101-
export default router
117+
});
118+
119+
//全局路由守卫、路由拦截
120+
// router.beforeEach((to, from, next) => {
121+
// const isLogin = localStorage.token ? true : false;
122+
// if (to.path === "/login" || to.path === "/forgotPassword") {
123+
// next();
124+
// } else {
125+
// isLogin ? next() : next("/");
126+
// }
127+
// });
128+
129+
export default router;

‎src/views/Doc.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161

6262
<script>
6363
export default {
64-
name: 'HelloWorld',
64+
name: 'doc',
6565
props: {
6666
msg: String
6767
}

0 commit comments

Comments
 (0)