Vue3element ui plus面包屑与vue-route结合使用

Posted 2022-04-05 woodwhale

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

前言

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

1、观察结构

我的后台的布局如下：

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

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

2、编写面包屑

因为我们的路由不是固定的，所以面包屑肯定是要使用v-for、v-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已经完成了，但是我们还需要左侧的菜单栏跳转到相应的位置

效果如下：

我的左侧菜单路由单独写了一个vue，这里直接给出代码，核心逻辑就是使用onBeforeRouteUpdate方法在每次路由改变的时候进行监听，将el-menu的default-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非常的简单便捷，但是我发现一个问题，每一个后端人员都有一颗前端的心，如果前端写的不满意，往往花费修改的时间比后端写逻辑代码还来的多…