人人開源項(xiàng)目前端添加靜態(tài)路由

在src/views下創(chuàng)建自己要展示的頁面

在src/router/index.js中注冊頁面

以下是部分改動(dòng)代碼

// 主入口路由(需嵌套上左右整體布局) const mainRoutes = {path: '/',component: _import('main'),name: 'main',redirect: { name: 'home' },meta: { title: '主入口整體布局' },children: [// 通過meta對象設(shè)置路由展示方式// 1. isTab: 是否通過tab展示內(nèi)容, true: 是, false: 否// 2. iframeUrl: 是否通過iframe嵌套展示內(nèi)容, '以http[s]://開頭': 是, '': 否// 提示: 如需要通過iframe嵌套展示內(nèi)容, 但不通過tab打開, 請自行創(chuàng)建組件使用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: '小區(qū)', 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中添加自己注冊路由對應(yīng)的頁面跳轉(zhuǎn)

以下是部分代碼

<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>小區(qū)管理</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">房產(chǎn)</span></el-menu-item></el-submenu><sub-menuv-for="menu in menuList":key="menu.menuId":menu="menu":dynamicMenuRoutes="dynamicMenuRoutes"></sub-menu></el-menu></div></aside> </template>

效果展示

總結(jié)

以上是生活随笔為你收集整理的人人开源项目前端添加静态路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。