navtop -sidebar -menubar 组合思路_nav-top是啥-优快云博客

本文介绍Vue.js项目中路由配置及组件管理的方法，包括主页面布局、侧边栏导航、多级路由设置等关键技术实现。

app.vue 为主页面
通过路由定位到首页 8080/home/index
路由一级要记得写 component: Layout
可以在 <router-view .> 里面写class 从而置顶样式
路由代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index.vue'
import { publish } from "@/views/publish/router"
import { websiteServer } from "@/views/websiteServer/router"
Vue.use(VueRouter)

let routes = [
  {
    path: '/',
    redirect: '/home/index',
    hide: true
  },
  {
    path: '/home',
    name: 'Home',
    meta: { title: '首页', full: true, icon: 'example' },
    isMenubarShow: false,
    component: Layout,
    children: [{
      path: 'index',
      name: 'index1',
      meta: { title: '首页' },
      component: () => import('@/views/home/index.vue'),
    }]
  },
]
routes = routes.concat(publish, websiteServer)  // 合并路由
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

当路由进到home/index 页面时会渲染导航栏 component: Layout

再是 layout 页面

<template>
  <div class="app-container">
    <sidebar />
    <div class="container">
      <navtop />
      <div class="main">
        <!-- 当路由 meta: {Full:false }为fasle  不展示二级路由 不让展示-->
        <menubar v-show="!menubarFull" />
        <!-- 展示主页面 -->
        <router-view class="main-content"/>
      </div>
    </div>
  </div>
</template>
<script>
computed: {
    menubarFull() {  // 判断二级是不是需要隐藏不渲染
      return this.$store.state.menubar.meta.full
    },
  },
  watch: {},
  mounted() {
    const routes = this.$router.options.routes // 所有路由
    const currentRouter = this.$route.path // 当前活跃的路由
    const item = routes.find(x => x.path !=='/' && currentRouter.indexOf(x.path) > -1)
    if (item) {
      this.$store.commit('CHANGEMENU', item)
    }
    this.$store.dispatch('listGeologyTree') // 省市区
    this.$store.dispatch('listRoleName') // 角色展示
<script>
  },

+ 侧边栏  数据信息从 路由里面获取 this.$router.options.routes 
+ defaultRouter 默认的当前一级路由   this.$route.path
+ <el-menu.> router 路由形式菜单
+ routers 为所有路由信息   this.$router.options.routes
+ <el-menu-item.> index 为待选中路由的标识
+ :route="{path: item.path + '/' + item.children[0].path}" 路由形式跳转
+ 点击一