项目地址
添加路由页面
首先先捋一下整体的页面结构分为三部分
1.侧边栏、2.header、3.视图区
页面结构
侧边栏的导航与页面相对应，根据导航栏新建对应页面（含登陆、404）
src目录下新建views文件夹用来放视图文件
新建文件目录
新建各目录视图文件
视图文件目录
路由配置
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
//把页面切换作为layout的子路由，页面结构参考panjiachen管理后台
import Layout from "../views/layout/layout";
export default new Router({
routes: [
//登录
{
path: "/login",
component: r =>
// r=>require.ensure([],()=>r(require('...'),xxx))
//切割路由懒加载，能够有效提升首页加载速度
require.ensure([], () => r(require("@/views/login/index"), "login")),
hidden: true
},
//404
{
path: "/404",
//设置404页面
component: r =>
require.ensure([], () => r(require("@/views/404"), "404")),
hidden: true
},
{ path: "*", redirect: "/404", hidden: true },
//首页
{
path: "/",
component: Layout,
redirect: "/home",
name: "Home",
hidden: true,
children: [
{
path: "home",
component: r =>
require.ensure([], () => r(require("@/views/home/index"), "home")),
meta: { title: "Home", needLogin: true }
}
]
},
//charts
{
path: "/charts",
component: Layout,
redirect: "/charts/pieChart",
name: "charts",
meta: { title: "图表" },
children: [
{
path: "pieChart",
name: "pieChart",
component: r =>
require.ensure([], () =>
r(require("@/views/charts/pieChart"), "charts")
),
meta: { title: "饼图", needLogin: true }
},
{
path: "lineChart",
name: "lineChart",
component: r =>
require.ensure([], () =>
r(require("@/views/charts/lineChart"), "charts")
),
meta: { title: "条形图", needLogin: true }
}
]
},
//tables
{
path: "/tables",
component: Layout,
redirect: "/tables/normalTable",
name: "tables",
meta: { title: "表格" },
children: [
{
path: "normalTable",
name: "normalTable",
component: r =>
require.ensure([], () =>
r(require("@/views/tables/normalTable"), "tables")
),
meta: { title: "普通表格", needLogin: true }
},
{
path: "table1/edit",
name: "table1Edit",
component: r =>
require.ensure([], () =>
r(require("@/views/tables/table1Edit"), "tables")
),
meta: { title: "table1Edit", needLogin: true }
},
{
path: "complexTable",
name: "complexTable",
component: r =>
require.ensure([], () =>
r(require("@/views/tables/complexTable"), "tables")
),
meta: { title: "功能表格", needLogin: true }
}
]
},
//editor
{
path: "/editor",
component: Layout,
redirect: "/editor/jsonEditor",
children: [
{
path: "jsonEditor",
name: "jsonEditor",
component: r =>
require.ensure([], () =>
r(require("@/views/editor/jsonEditor"), "editor")
),
meta: { title: "jsonEditor", needLogin: true }
},
{
path: "markdown",
name: "markdown",
component: r =>
require.ensure([], () =>
r(require("@/views/editor/markdown"), "editor")
),
meta: { title: "markdown", needLogin: true }
}
]
}
]
});
添加导航
导航页面 src/views/layout/slideBar.vue
导航栏用的是element的导航ui组建
//是否只保持一个子菜单的展开
opened: false,
//是否使用 vue-router 的模式
router: true,
//当前激活菜单的 index（导航属性）
//default-active:可以直接设置为当前路由当path
上面几个主要参数在文档中都有说明
测试导航
导航页-404
