項(xiàng)目地址

github地址、 碼云地址

路由懶加載
分欄布局

添加路由頁面

首先先捋一下整體的頁面結(jié)構(gòu)分為三部分
1.側(cè)邊欄、2.header、3.視圖區(qū)

頁面結(jié)構(gòu)

側(cè)邊欄的導(dǎo)航與頁面相對應(yīng)，根據(jù)導(dǎo)航欄新建對應(yīng)頁面（含登陸、404）
src目錄下新建views文件夾用來放視圖文件

新建文件目錄

新建各目錄視圖文件

視圖文件目錄

路由配置

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
//把頁面切換作為layout的子路由，頁面結(jié)構(gòu)參考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",
      //設(shè)置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 }
        }
      ]
    }
  ]
});

添加導(dǎo)航

導(dǎo)航頁面 src/views/layout/slideBar.vue
導(dǎo)航欄用的是element的導(dǎo)航ui組建

//是否只保持一個子菜單的展開
opened: false,
//是否使用 vue-router 的模式
router: true,
//當(dāng)前激活菜單的 index（導(dǎo)航屬性）
//default-active:可以直接設(shè)置為當(dāng)前路由當(dāng)path

上面幾個主要參數(shù)在文檔中都有說明

測試導(dǎo)航

導(dǎo)航頁-404

5.登錄驗(yàn)證，重定向及訪問限制