1、DevExtreme 左侧菜单点击切换路由 + 弹性盒布局

1、安装 DevExtreme

npm i devextreme
npm i devextreme-vue

main.js中添加样式

/*
 * @Descripttion: 菜单名称
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-10-29 11:10:28
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-10-31 14:51:46
 */
import Vue from 'vue'
import App from './App.vue'
import { router } from './router'
// 添加 devextreme 样式
import 'devextreme/dist/css/dx.common.css'
import 'devextreme/dist/css/dx.light.css'

Vue.config.productionTip = false

new Vue({
  router,
  el: '#app',
  render: (h) => h(App),
}).$mount('#app')

2、components 创建公共组件

BaseHeader 公共头部 BaseMenu 公共菜单栏

BaseHeader 代码

<!--
 * @Descripttion: 公共头部
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-10-31 13:57:12
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-10-31 15:11:36
-->
<template>
  <div class="baseHeader">
    <p>DevExtreme</p>
  </div>
</template>

<script>
export default {
  name: 'baseHeader',
}
</script>

<style lang="less" scoped>
.baseHeader {
  display: flex;
  align-content: center;
  p {
    font-size: 20px;
    font-weight: 900;
  }
}
</style>

BaseMenu 源码

<!--
 * @Descripttion: 公共菜单
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-10-31 13:57:58
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-10-31 15:40:38
-->
<template>
  <div class="baseMenu">
    <DxTreeView
      :data-source="menuList"
      :select-by-click="true"
      selection-mode="single"
      @item-click="onChangeClick"
    ></DxTreeView>
  </div>
</template>

<script>
import DxTreeView from 'devextreme-vue/tree-view'
export default {
  name: 'baseMenu',
  components: {
    DxTreeView,
  },
  data() {
    return {
      menuList: [
        {
          id: '1',
          text: 'Demo',
          items: [
            {
              id: '1_1',
              text: '测试1',
              url: 'test1',
            },
            {
              id: '1_2',
              text: '测试2',
              url: 'test2',
            },
          ],
        },
        {
          id: '2',
          text: 'Demo2',
          items: [
            {
              id: '2_1',
              text: '测试1',
              url: '789',
            },
            {
              id: '2_2',
              text: '测试2',
              url: '123',
            },
            {
              id: '2_3',
              text: '测试3',
              url: '456',
            },
          ],
        },
      ],
    }
  },
  methods: {
    onChangeClick(e) {
      this.$router.push({
        name: e.itemData.url,
      })
    },
  },
}
</script>

<style></style>

3、创建公共容器

view文件夹下创建公共容器/BaseContainer/index.vue,在此容器中进行布局，引入公共头部与菜单，源码如下

<!--
 * @Descripttion: 容器
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-10-31 14:11:02
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-10-31 15:18:51
-->
<template>
  <div class="BaseContainer">
    <div class="header">
      <base-header></base-header>
    </div>
    <div class="wrapper">
      <div class="menu">
        <base-menu></base-menu>
      </div>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import BaseHeader from '@/components/BaseHeader'
import BaseMenu from '@/components/BaseMenu'
export default {
  name: 'BaseContainer',
  components: {
    BaseHeader,
    BaseMenu,
  },
}
</script>

<style lang="less" scoped>
.BaseContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
  }
  .wrapper {
    margin: 10px;
    flex: 10;
    display: flex;
    .menu {
      flex: 2;
      background-color: #fff;
      border-radius: 10px;
    }
    .content {
      flex: 10;
      margin-left: 15px;
      background-color: #fff;
      border-radius: 10px;
    }
  }
}
</style>

创建几个测试文件并添加到路由中

4、配置路由

/*
 * @Descripttion: 路由
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-10-29 11:27:01
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-10-31 15:58:49
 */
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 解决切换路由报错的问题
const errorPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return errorPush.call(this, location).catch((err) => err)
}

const routes = [
  {
    name: '/',
    // 默认
    redirect: { name: 'Home' },
    component: () => import('@/view/BaseContainer'),
    children: [
      // 首页
      {
        path: 'Home',
        name: 'Home',
        component: () => import('@/view/Home'),
        meta: {
          title: '首页',
        },
      },
      {
        path: 'test1',
        name: 'test1',
        component: () => import('@/view/test1'),
      },
      {
        path: 'test2',
        name: 'test2',
        component: () => import('@/view/test2'),
      },
    ],
  },
]
routes.forEach((route) => {
  route.path = route.path || '/' + (route.name || '')
})

const router = new Router({
  routes,
})

export { router }

5、实例