直播源码开发，vue实现动态侧边导航栏
router 文件夹
// index.ts
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/login/index.vue';
import Layout from '@/layout/index.vue';
Vue.use(VueRouter);
/**
* hidden 表示是否需要在侧边导航栏出现 ，true表示不需要
* isFirst 表示是否只有一级权限，只出现在只有一个子集，没有其他孙子集
* 当权限拥有多个子集或者孙子集，一级权限需要加上 meta
* 二级权限拥有子集，也必须有 meta
*/
// 基础路由
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index.vue')
}
]
},
{
path: '/',
redirect: '/dashboard',
hidden: true
},
{
path: '/login',
name: 'Login',
component: Login,
hidden: true
},
{
path: '/dashboard',
component: Layout,
redirect: '/dashboard/index',
isFirst: true,
children: [
{
path: 'index',
name: 'Dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: {
title: '首页',
icon: 'el-icon-location'
}
}
]
}
];
// 动态路由
export const asyncRoutes = [
{
path: '/form',
component: Layout,
redirect: '/form/index',
isFirst: true,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index.vue'),
meta: {
title: '表单',
role: 'form',
icon: 'el-icon-location'
}
}
]
},
{
path: '/editor',
component: Layout,
redirect: '/editor/index',
meta: {
role: 'editors',
title: '总富文本',
icon: 'el-icon-location'
},
children: [
{
path: 'index',
name: 'Editor',
component: () => import('@/views/editor/index.vue'),
meta: {
title: '富文本',
role: 'editor',
icon: 'el-icon-location'
}
},
{
path: 'two',
name: 'Two',
redirect: '/editor/two/three',
component: () => import('@/views/editor/two.vue'),
meta: {
title: '二级导航',
role: 'two',
icon: 'el-icon-location'
},
children: [
{
path: 'three',
name: 'Three',
component: () => import('@/views/editor/three.vue'),
meta: {
title: '三级导航',
role: 'three',
icon: 'el-icon-location'
}
},
{
path: 'four',
name: 'Four',
component: () => import('@/views/editor/four.vue'),
meta: {
title: '三级导航2',
role: 'four',
icon: 'el-icon-location'
}
}
]
}
]
},
{
path: '/tree',
component: Layout,
redirect: '/tree/index',
isFirst: true,
children: [
{
path: 'index',
name: 'Tree',
component: () => import('@/views/tree/index.vue'),
meta: {
title: '树状图',
role: 'tree',
icon: 'el-icon-location'
}
}
]
},
{
path: '/excel',
component: Layout,
redirect: '/excel/index',
isFirst: true,
children: [
{
path: 'index',
name: 'Excel',
component: () => import('@/views/excel/index.vue'),
meta: {
title: '导入导出',
role: 'excel',
icon: 'el-icon-location'
}
}
]
}
];
// 出错跳转的路由
export const error = [
// 404
{
path: '/404',
component: () => import('@/views/error/index.vue'),
hidden: true
},
{
path: '*',
redirect: '/404',
hidden: true
}
];
const createRouter = () =>
new VueRouter({
scrollBehavior: () => ({
x: 0,
y: 0
}),
routes: constantRoutes
});
const router = createRouter();
// 刷新路由
export function resetRouter () {
const newRouter = createRouter();
(router as any).matcher = (newRouter as any).matcher;
}
export default router;
创建 layout 文件夹
<!-- index.vue 用于定义页面的基础布局 -->
<template>
<div>
<el-container>
<!-- 头部 -->
<el-header>
<div>
<p>运营后台</p>
<div>
<el-dropdown placement="bottom" @command="handleCommand">
<div>
<img src="" alt="" />
<p>小红</p>
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="info">个人信息</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
<el-container :class="{ hideSidebar: isCollapse }">
<!-- 侧边导航栏 -->
<el-aside>
<el-scrollbar>
<el-menu
:collapse="isCollapse"
:default-active="$router.currentRoute.path"
:collapse-transition="false"
background-color="#eee"
text-color="#666"
active-text-color="#0099ff"
@select="handleSelect"
v-if="permissionRoutes"
>
<template v-for="item in permissionRoutes">
<el-menu-item
v-if="
!item.hidden && item.children.length === 1 && item.isFirst
"
:index="item.redirect"
:key="item.path"
>
<i :class="item.children[0].meta.icon"></i>
<span slot="title">{{ item.children[0].meta.title }}</span>
</el-menu-item>
<sub-menu
v-if="!item.hidden && !item.isFirst"
:item="item"
:key="item.path"
:basePath="item.path"
></sub-menu>
</template>
</el-menu>
</el-scrollbar>
</el-aside>
<!-- 主体内容 -->
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import Vue from 'vue';
import { mapGetters } from 'vuex';
import SubMenu from '@/components/SubMenu/index.vue';
import { resetRouter } from '@/router';
export default Vue.extend({
computed: {
// 路由
...mapGetters(['permissionRoutes'])
},
methods: {
// 页面跳转
handleSelect (index: string) {
if (this.$router.currentRoute.path === index) {
return;
}
this.$router.push(index);
},
// 下拉框选择
handleCommand (command: string) {
if (command === 'logout') {
localStorage.clear();
resetRouter();
this.$router.push({ name: 'Login' });
}
}
},
components: {
SubMenu
}
});
</script>
<style scoped>
.layout {
width: 100%;
height: 100vh;
.header-content {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
.header-tit {
font-size: 18px;
font-weight: bold;
}
.user-info {
display: flex;
align-items: center;
.el-dropdown-link {
display: flex;
align-items: center;
img {
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 10px;
}
.header-username {
font-size: 16px;
color: #fff;
}
}
}
}
}
/deep/.el-header {
}
/deep/.el-main {
background-color: #f2f2f2;
}
/deep/.el-scrollbar {
height: 100%;
background-color: #eee;
}
// 折叠展开动画
.sidebar-container {
transition: width 0.28s;
width: 200px !important;
height: 100%;
overflow: hidden;
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
}
.hideSidebar {
.sidebar-container {
width: 60px !important;
}
}
</style>
以上就是直播源码开发，vue实现动态侧边导航栏， 更多内容欢迎关注之后的文章
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/279049.html