【Vue3】element ui plus面包屑与vue-route结合使用

2023-03-13 11:19:46

【Vue3】element ui plus面包屑与vue-route结合使用

前言

在做一个后台管理系统的时候,发现了element ui plus文档中的面包屑的使用方式,觉得还挺不错的,准备拿来用,发现可以与vue的route结合使用。

1、观察结构

我的后台的布局如下:

image-20220403204526277

使用的是element ui中的如下的格式:

image-20220403204615705

于是我们可以在main这个模块中写入两个部分,第一个就是最上面的面包屑,第二个就是下面的内容部分,这个可以自由发挥。

2、编写面包屑

因为我们的路由不是固定的,所以面包屑肯定是要使用v-forv-if这类的逻辑判断

我的代码如下:

<template>
  <div>
    <div class="content-title-box">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <template v-for="(item, index) in breadList">
          <el-breadcrumb-item
            v-if="item.name"
            :key="index"
            :to="item.path"
          >{{ item.name }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
    <div class="content-container-box">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

可以看到分类了两部分

  • content-title-box
  • content-container-box

我们在content-title-box中写入el-breadcrumb组件

这里的breadList我们在js中绑定一下,同时编写的方法也很简单,代码如下

<script>
export default {
  data() {
    return {
      breadList: [],
    }
  },
  methods: {
    getMatched() {
      this.breadList = this.$route.matched;
    },
  },
  created() {
    this.getMatched()
  },
  watch: {
    $route(to,from) {
      this.breadList = this.$route.matched;
    }
  }
}
</script>

watch是用来路由改变的监听器,通过动态改变breadList来改变每个页面的面包屑显示

3、适配路由

我们需要实现的是,点击面包屑,路由会跳转到相应页面,我们通过绑定的:to已经完成了,但是我们还需要左侧的菜单栏跳转到相应的位置

效果如下:

chrome_202204035310231

我的左侧菜单路由单独写了一个vue,这里直接给出代码,核心逻辑就是使用onBeforeRouteUpdate方法在每次路由改变的时候进行监听,将el-menudefault-active更改成我们面包屑点击的目标url

<template>
    <div class="nav">
        <el-menu :default-active="curPath" :unique-opened="true" class="el-menu-vertical">
            <template v-for="(item, mainIndex) in menuList" :key="mainIndex + ''">
                <router-link :to="item.path" v-if="!item.children">
                    <el-menu-item :index="item.path">
                        <el-icon :size="20">
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </el-menu-item>
                </router-link>
                <el-sub-menu :index="item.path" v-else>
                    <template #title>
                        <el-icon :size="20">
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <router-link
                        :to="item.path + '/' + subItem.path"
                        v-for="(subItem, subIndex) in item.children"
                        :key="subIndex + ''"
                    >
                        <el-menu-item :index="item.path + '/' + subItem.path">
                            <el-icon :size="20">
                                <component :is="subItem.icon" />
                            </el-icon>
                            <span>{{ subItem.name }}</span>
                        </el-menu-item>
                    </router-link>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>


<script>
import { onBeforeRouteUpdate } from "vue-router";
import { routes } from "../route";

export default {
    data() {
        return {
            curPath: '',
            menuList: '',
        }
    },
    methods: {
        init() {
            this.curPath = this.$route.fullPath
            this.menuList = routes[0].children
        }
    },
    mounted() {
        this.init()
        onBeforeRouteUpdate(to => {
            this.curPath = to.path
        });
    }
}
</script>

<style>
.el-menu-vertical a {
    text-decoration: none;
}
</style>

因为需要使用路由中的数据,所以我这里也把我的路由部分的js给出来

import { createRouter,createWebHashHistory} from "vue-router"

// 布局
const baseView = () => import("../layout/BaseView.vue")
const rightView = () => import("../layout/RightConent.vue")
// 登录页面
const login = () => import("../pages/login/login.vue")
// 内容部分
const postArticle = () => import("../pages/content/PostArticle.vue")
const articleManage = () => import("../pages/content/ManageArticle.vue")
const imageManage = () => import("../pages/content/ManageImage.vue")
const commentManage = () => import("../pages/content/ManageComment.vue")
// 仪表盘主页
const index = () => import("../pages/dashboard/Index.vue")
// 运营部分
const categoryManage = () => import("../pages/operation/ManageCategory.vue")
const loopManage = () => import("../pages/operation/ManagerLoop.vue")
// 设置
const friendLink = () => import("../pages/settings/FriendLink.vue")
const websiteInfo = () => import("../pages/settings/WebSiteInfo.vue")
// 用户
const userList = () => import("../pages/user/ListUser.vue")
const adminInfo = () => import("../pages/user/UpdateAdminInfo.vue")
const adminResetPwd = () => import("../pages/user/UpdatePassword.vue")
const adminEmail = () => import("../pages/user/UpdateAdminEmail.vue")

// 路由器
export const routes = [
    {
        path: "", 
        component: baseView,
        redirect: "/index",
        children: [
            {
                path: "/index",
                name: "首页",
                icon: "HomeFilled",
                component: index
            },
            {
                path: "/content",
                name: "内容",
                icon: "Tickets",
                component: rightView,
                children: [
                    {
                        path: "post-article",
                        name: "发表文章",
                        icon: "EditPen",
                        component: postArticle
                    },
                    {
                        path: "manage-article",
                        name: "文章管理",
                        icon: "Document",
                        component: articleManage
                    },
                    {
                        path: "manage-comment",
                        name: "评论管理",
                        icon: "ChatDotRound",
                        component: commentManage
                    },
                    {
                        path: "manage-image",
                        name: "图片管理",
                        icon: "Picture",
                        component: imageManage
                    }
                ]
            },
            {
                path: "/user",
                name: "用户",
                icon: "User",
                component: rightView,
                children: [
                    {
                        path: "list",
                        name: "用户列表",
                        icon: "UserFilled",
                        component: userList
                    },
                    {
                        path: "reset-password",
                        name: "密码重置",
                        icon: "Lock",
                        component: adminResetPwd
                    },
                    {
                        path: "email",
                        name: "邮箱重置",
                        icon: "Promotion",
                        component: adminEmail
                    },
                    {
                        path: "info",
                        name: "信息重置",
                        icon: "InfoFilled",
                        component: adminInfo
                    }
                ]
            },
            {
                path: "/operation",
                name: "运营",
                icon: "DataLine",
                component: rightView,
                children: [
                    {
                        path: "category",
                        name: "分类设置",
                        icon: "Menu",
                        component: categoryManage
                    },
                    {
                        path: "loop",
                        name: "轮播图设置",
                        icon: "PictureRounded",
                        component: loopManage
                    }
                ]
            },
            {
                path: "/settings",
                name: "设置",
                icon: "Setting",
                component: rightView,
                children: [
                    {
                        path: "website-info",
                        name: "站点信息",
                        icon: "CreditCard",
                        component: websiteInfo
                    },
                    {
                        path: "friend-link",
                        name: "友情链接",
                        icon: "Link",
                        component: friendLink
                    }
                ]
            }
        ]
    },
    {
        path: "/login",
        name: "登录",
        component: login,
    }
]

export const router = createRouter({
    history: createWebHashHistory(),
    routes
})

后话

虽然vue3非常的简单便捷,但是我发现一个问题,每一个后端人员都有一颗前端的心,如果前端写的不满意,往往花费修改的时间比后端写逻辑代码还来的多…

  • 作者:woodwhale
  • 原文链接:https://blog.csdn.net/woodwhale/article/details/123944372
    更新时间:2023-03-13 11:19:46