直播源码开发，vue实现动态侧边导航栏

router 文件夹

// index.ts<br>import Vue from 'vue';<br>import VueRouter from 'vue-router';<br>import Login from '@/views/login/index.vue';<br>import Layout from '@/layout/index.vue';<br>Vue.use(VueRouter);<br>/**<br> * hidden 表示是否需要在侧边导航栏出现 ，true表示不需要<br> * isFirst 表示是否只有一级权限，只出现在只有一个子集，没有其他孙子集<br> * 当权限拥有多个子集或者孙子集，一级权限需要加上 meta<br> * 二级权限拥有子集，也必须有 meta<br> */<br>// 基础路由<br>export const constantRoutes = [<br>  {<br>    path: '/redirect',<br>    component: Layout,<br>    hidden: true,<br>    children: [<br>      {<br>        path: '/redirect/:path(.*)',<br>        component: () => import('@/views/redirect/index.vue')<br>      }<br>    ]<br>  },<br>  {<br>    path: '/',<br>    redirect: '/dashboard',<br>    hidden: true<br>  },<br>  {<br>    path: '/login',<br>    name: 'Login',<br>    component: Login,<br>    hidden: true<br>  },<br>  {<br>    path: '/dashboard',<br>    component: Layout,<br>    redirect: '/dashboard/index',<br>    isFirst: true,<br>    children: [<br>      {<br>        path: 'index',<br>        name: 'Dashboard',<br>        component: () => import('@/views/dashboard/index.vue'),<br>        meta: {<br>          title: '首页',<br>          icon: 'el-icon-location'<br>        }<br>      }<br>    ]<br>  }<br>];<br>// 动态路由<br>export const asyncRoutes = [<br>  {<br>    path: '/form',<br>    component: Layout,<br>    redirect: '/form/index',<br>    isFirst: true,<br>    children: [<br>      {<br>        path: 'index',<br>        name: 'Form',<br>        component: () => import('@/views/form/index.vue'),<br>        meta: {<br>          title: '表单',<br>          role: 'form',<br>          icon: 'el-icon-location'<br>        }<br>      }<br>    ]<br>  },<br>  {<br>    path: '/editor',<br>    component: Layout,<br>    redirect: '/editor/index',<br>    meta: {<br>      role: 'editors',<br>      title: '总富文本',<br>      icon: 'el-icon-location'<br>    },<br>    children: [<br>      {<br>        path: 'index',<br>        name: 'Editor',<br>        component: () => import('@/views/editor/index.vue'),<br>        meta: {<br>          title: '富文本',<br>          role: 'editor',<br>          icon: 'el-icon-location'<br>        }<br>      },<br>      {<br>        path: 'two',<br>        name: 'Two',<br>        redirect: '/editor/two/three',<br>        component: () => import('@/views/editor/two.vue'),<br>        meta: {<br>          title: '二级导航',<br>          role: 'two',<br>          icon: 'el-icon-location'<br>        },<br>        children: [<br>          {<br>            path: 'three',<br>            name: 'Three',<br>            component: () => import('@/views/editor/three.vue'),<br>            meta: {<br>              title: '三级导航',<br>              role: 'three',<br>              icon: 'el-icon-location'<br>            }<br>          },<br>          {<br>            path: 'four',<br>            name: 'Four',<br>            component: () => import('@/views/editor/four.vue'),<br>            meta: {<br>              title: '三级导航2',<br>              role: 'four',<br>              icon: 'el-icon-location'<br>            }<br>          }<br>        ]<br>      }<br>    ]<br>  },<br>  {<br>    path: '/tree',<br>    component: Layout,<br>    redirect: '/tree/index',<br>    isFirst: true,<br>    children: [<br>      {<br>        path: 'index',<br>        name: 'Tree',<br>        component: () => import('@/views/tree/index.vue'),<br>        meta: {<br>          title: '树状图',<br>          role: 'tree',<br>          icon: 'el-icon-location'<br>        }<br>      }<br>    ]<br>  },<br>  {<br>    path: '/excel',<br>    component: Layout,<br>    redirect: '/excel/index',<br>    isFirst: true,<br>    children: [<br>      {<br>        path: 'index',<br>        name: 'Excel',<br>        component: () => import('@/views/excel/index.vue'),<br>        meta: {<br>          title: '导入导出',<br>          role: 'excel',<br>          icon: 'el-icon-location'<br>        }<br>      }<br>    ]<br>  }<br>];<br>// 出错跳转的路由<br>export const error = [<br>  // 404<br>  {<br>    path: '/404',<br>    component: () => import('@/views/error/index.vue'),<br>    hidden: true<br>  },<br>  {<br>    path: '*',<br>    redirect: '/404',<br>    hidden: true<br>  }<br>];<br>const createRouter = () =><br>  new VueRouter({<br>    scrollBehavior: () => ({<br>      x: 0,<br>      y: 0<br>    }),<br>    routes: constantRoutes<br>  });<br>const router = createRouter();<br>// 刷新路由<br>export function resetRouter () {<br>  const newRouter = createRouter();<br>  (router as any).matcher = (newRouter as any).matcher;<br>}<br>export default router;

创建 layout 文件夹

<!-- index.vue 用于定义页面的基础布局 --><br><template><br>  <div><br>    <el-container><br>      <!-- 头部 --><br>      <el-header><br>        <div><br>          <p>运营后台</p><br>          <div><br>            <el-dropdown placement="bottom" @command="handleCommand"><br>              <div><br>                <img src="" alt="" /><br>                <p>小红</p><br>                <i class="el-icon-arrow-down el-icon--right"></i><br>              </div><br>              <el-dropdown-menu slot="dropdown"><br>                <el-dropdown-item command="info">个人信息</el-dropdown-item><br>                <el-dropdown-item command="logout">退出登录</el-dropdown-item><br>              </el-dropdown-menu><br>            </el-dropdown><br>          </div><br>        </div><br>      </el-header><br>      <el-container :class="{ hideSidebar: isCollapse }"><br>        <!-- 侧边导航栏 --><br>        <el-aside><br>          <el-scrollbar><br>            <el-menu<br>              :collapse="isCollapse"<br>              :default-active="$router.currentRoute.path"<br>              :collapse-transition="false"<br>              background-color="#eee"<br>              text-color="#666"<br>              active-text-color="#0099ff"<br>              @select="handleSelect"<br>              v-if="permissionRoutes"<br>            ><br>              <template v-for="item in permissionRoutes"><br>                <el-menu-item<br>                  v-if="<br>                    !item.hidden && item.children.length === 1 && item.isFirst<br>                  "<br>                  :index="item.redirect"<br>                  :key="item.path"<br>                ><br>                  <i :class="item.children[0].meta.icon"></i><br>                  <span slot="title">{{ item.children[0].meta.title }}</span><br>                </el-menu-item><br>                <sub-menu<br>                  v-if="!item.hidden && !item.isFirst"<br>                  :item="item"<br>                  :key="item.path"<br>                  :basePath="item.path"<br>                ></sub-menu><br>              </template><br>            </el-menu><br>          </el-scrollbar><br>        </el-aside><br>        <!-- 主体内容 --><br>        <el-main><br>          <router-view /><br>        </el-main><br>      </el-container><br>    </el-container><br>  </div><br></template><br><script><br>import Vue from 'vue';<br>import { mapGetters } from 'vuex';<br>import SubMenu from '@/components/SubMenu/index.vue';<br>import { resetRouter } from '@/router';<br>export default Vue.extend({<br>  computed: {<br>    // 路由<br>    ...mapGetters(['permissionRoutes'])<br>  },<br>  methods: {<br>    // 页面跳转<br>    handleSelect (index: string) {<br>      if (this.$router.currentRoute.path === index) {<br>        return;<br>      }<br>      this.$router.push(index);<br>    },<br>    // 下拉框选择<br>    handleCommand (command: string) {<br>      if (command === 'logout') {<br>        localStorage.clear();<br>        resetRouter();<br>        this.$router.push({ name: 'Login' });<br>      }<br>    }<br>  },<br>  components: {<br>    SubMenu<br>  }<br>});<br></script><br><style scoped><br>.layout {<br>  width: 100%;<br>  height: 100vh;<br>  .header-content {<br>    height: 100%;<br>    display: flex;<br>    justify-content: space-between;<br>    align-items: center;<br>    color: #fff;<br>    .header-tit {<br>      font-size: 18px;<br>      font-weight: bold;<br>    }<br>    .user-info {<br>      display: flex;<br>      align-items: center;<br>      .el-dropdown-link {<br>        display: flex;<br>        align-items: center;<br>        img {<br>          width: 35px;<br>          height: 35px;<br>          border-radius: 50%;<br>          margin-right: 10px;<br>        }<br>        .header-username {<br>          font-size: 16px;<br>          color: #fff;<br>        }<br>      }<br>    }<br>  }<br>}<br>/deep/.el-header {<br>  <br>}<br>/deep/.el-main {<br>  background-color: #f2f2f2;<br>}<br>/deep/.el-scrollbar {<br>  height: 100%;<br>  background-color: #eee;<br>}<br>// 折叠展开动画<br>.sidebar-container {<br>  transition: width 0.28s;<br>  width: 200px !important;<br>  height: 100%;<br>  overflow: hidden;<br>  .el-menu {<br>    border: none;<br>    height: 100%;<br>    width: 100% !important;<br>  }<br>}<br>.hideSidebar {<br>  .sidebar-container {<br>    width: 60px !important;<br>  }<br>}<br></style>