人人開源項目前端添加靜態路由

在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-menuv-for="menu in menuList":key="menu.menuId":menu="menu":dynamicMenuRoutes="dynamicMenuRoutes"></sub-menu></el-menu></div></aside> </template>

效果展示

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。