admin管理员组文章数量:1633930
人人开源项目前端添加静态路由
- 在src/views下创建自己要展示的页面
- 在src/router/index.js中注册页面
以下是部分改动代码
// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
path: '/',
component: _import('main'),
name: 'main',
redirect: { name: 'home' },
meta: { title: '主入口整体布局' },
children: [
// 通过meta对象设置路由展示方式
// 1. isTab: 是否通过tab展示内容, true: 是, false: 否
// 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
//此处为自己添加的页面
{ path: '/dept', component: _import('dept/dept'), name: 'dept', meta: { title: '小区', isTab: true } },
{ path: '/building', component: _import('dept/buildingInfo'), name: 'buildingInfo', meta: { title: '楼宇', isTab: true } },
{ path: '/roomInfo', component: _import('dept/roomInfo'), name: 'roomInfo', meta: { title: '房间', isTab: true } },
{ path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts1', isTab: true } },
{ path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
],
beforeEnter (to, from, next) {
let token = Vue.cookie.get('token')
if (!token || !/\S/.test(token)) {
clearLoginInfo()
next({ name: 'login' })
}
next()
}
}
- 在src/views/main-sidebar.vue中添加自己注册路由对应的页面跳转
以下是部分代码
<template>
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
<div class="site-sidebar__inner">
<el-menu
:default-active="menuActiveName || 'home'"
:collapse="sidebarFold"
:collapseTransition="false"
class="site-sidebar__menu">
<el-menu-item index="home" @click="$router.push({ name: 'home' })">
<icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="demo">
<template slot="title">
<icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
<span>demo</span>
</template>
<el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">echarts</span>
</el-menu-item>
<el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">
<icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">ueditor</span>
</el-menu-item>
</el-submenu>
<!-- 自己新添加的路由-->
<el-submenu index="dept">
<template slot="title">
<icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
<span>小区管理</span>
</template>
//name 为自己注册路由的name
<el-menu-item index="buildingInfo" @click="$router.push({ name: 'buildingInfo' })">
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">楼宇</span>
</el-menu-item>
<el-menu-item index="roomInfo" @click="$router.push({ name: 'roomInfo' })">
<icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">房产</span>
</el-menu-item>
</el-submenu>
<sub-menu
v-for="menu in menuList"
:key="menu.menuId"
:menu="menu"
:dynamicMenuRoutes="dynamicMenuRoutes">
</sub-menu>
</el-menu>
</div>
</aside>
</template>
- 效果展示
版权声明:本文标题:人人开源项目前端添加静态路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729175531a1188666.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论