标签：index vue component 侧边 源码 import path icon
直播源码开发，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实现动态侧边导航栏， 更多内容欢迎关注之后的文章
标签：index,vue,component,侧边,源码,import,path,icon 来源： https://www.cnblogs.com/yunbaomengnan/p/16554149.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。