vue3.0加MongoDB加node的后台管理系统（三）

现在开始主体架构的创建
首先进行定义大致规划

然后我们使用ant的侧边布局进行一些修改

• 定义面包屑
  主要就是监听路由转跳，在路由转跳的时候进行判断当前转跳的是不是登录页，如果不是就想当前页面的名称以及路径push到数组中，在对数组进行渲染，当点击面包屑的时候进行跳转
  在src/components/Breadcrumb/Breadcrumb.vue中定义面包屑

<template>
  <!-- 面包屑 -->
  <div>
    <a-breadcrumb :routes="routes"
                  style="font-size: 15px;
    font-weight: bold;">
      <template #itemRender="{ route, routes, paths }">
        <span v-if="routes.indexOf(route) === routes.length - 1 ">
          {
  {route.meta.title}}
        </span>
        <router-link v-else
                     :to="paths.join('/')">
          {
  {route.meta.title}}
        </router-link>
      </template>
    </a-breadcrumb>
  </div>
</template>
<script>
import {
     watchEffect, reactive, toRefs, onMounted } from 'vue'
import {
     useRouter, useRoute } from "vue-router";
export default {
    
  setup () {
    
    const data = reactive({
    
      routes: [],
    })
    const routers = useRouter();
    const route = useRoute();
    const setTags = (val) => {
    
      if (val.fullPath !== '/login') {
    
        data.routes = []
        const a = val.matched
        a.forEach((item, index) => {
    
          if (item.path !== '/') {
    
            data.routes.push(item)
          }
        })
      }
    }
    // 监听路由跳转
    watchEffect(() => {
    
      const a = route
      setTags(a)
      // console.log(a)
    })
    return {
    
      ...toRefs(data),
      setTags
    }
  }

};
</script>

• 定义标签
  在src/components/Tabs/Tab.vue中定义标签页
  标签页需要使用到vuex，所以定义vuex
  在src/store/store.js中书写vuex

import {
    createStore } from 'vuex'
let state = {
   
  panesList: [],
  openKeys: [],
  selectedKeys: [],
  collapsed:false
}
let getters = {
   
  panesList: state => state.panesList,
  remove: state => state.remove,
  panes: state => state.panes,
  openKeys: state => state.openKeys,
  selectedKeys: state => state.selectedKeys,
  collapsed:state => state.collapsed
}
let mutations = {
   
  setAddTags (state, panesList) {
   // 设置accessToken
    state.panesList = JSON.parse(localStorage.getItem('panesList'))
  },
  Collapsed(state,data){
   
    state.collapsed = data
  },
  // 删除
  removeadd (state, remove) {
   
    if (remove === '') {
   
      state.panesList = []
    } else {
   
      const i = state.panesList.findIndex(item => item.title === remove.title)
      state.panesList.splice(i, 1)
      console.log(state.panesList)
      // localStorage.setItem('panesList', JSON.stringify(state.panesList))
    }
    localStorage.setItem('panesList', JSON.stringify(state.panesList))
  },
  AddTags (state, panes) {
   
    if (_.findIndex(state.panesList, ['key', panes.key]) == -1) {
   
      state.panesList.push({
   
        title: panes.item.title,
        key: panes.key
      })
      state.openKeys = panes.key
    }
  },
  OpenKeys (state, openKeys) {
   
    state.openKeys = localStorage.getItem('openKeys');
  },
  // 删除其他
  RemoveOther (state, data) {
   
    const curItem = state.panesList.filter(item => {
   
      return item.key === data
    })
    state.panesList = curItem
    localStorage.setItem('panesList', JSON.stringify(state.panesList))
  },
  // 删除左侧或者右侧
  RemoveDirection (state, data) {
   
    if (data.direction === 'left') {
   
      const a = _.findIndex(state.panesList, ['key', data.key])
      state.panesList.splice(0, a)
    } else {
   
      const a = _.findIndex(state.panesList, ['key', data.key])
      state.panesList.splice(a + 1, state.panesList.length - 1)
    }

    localStorage.setItem('panesList', JSON.stringify(state.panesList))
  }

}
export default createStore({
   
  state,
  getters,
  mutations,
});

这个是标签页的完整代码
主要也是根据监听路由的跳转来进行判断

  1.进入页面之前判断本地中有没有标签页
  2.进行判断当前点击的页面在标签页中是否存在，如果不存在就进行