【前端笔记】直接用路由渲染面包屑导航信息和菜单伸缩

野性酷女 2022-10-06 04:44 264阅读 0赞

首页：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]  
导航：  
![在这里插入图片描述][2021061109134286.png]  
前端代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]  
代码  
Breadcrumb:

<template>
      <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title&&item.meta.breadcrumb!==false" :key="item.path">
            <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
              {
       {generateTitle(item.meta.title) }}</span>
            <a v-else @click.prevent="handleLink(item)">{
       { generateTitle(item.meta.title) }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </template>
    
    <script> import { generateTitle } from '@/utils/i18n' import pathToRegexp from 'path-to-regexp' export default { data() { return { levelList: null } }, watch: { $route() { this.getBreadcrumb() } }, created() { this.getBreadcrumb() }, methods: { generateTitle, getBreadcrumb() { // 直接利用路由信息渲染我们的面包屑导航 // this.$route.matched匹配到的会是一个数组 let matched = this.$route.matched.filter(item => { if (item.name) { return true } }) const first = matched[0] if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) { matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched) } this.levelList = matched }, pathCompile(path) { // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 const { params } = this.$route var toPath = pathToRegexp.compile(path) return toPath(params) }, handleLink(item) { const { redirect, path } = item if (redirect) { this.$router.push(redirect) return } this.$router.push(this.pathCompile(path)) } } } </script>

菜单伸缩组件

<template>
      <div>
        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{ 'is-active':isActive}" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
          <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path>
          <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path>
          <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path>
        </svg>
      </div>
    </template>
    
    
    <script> export default { name: 'hamburger', props: { isActive: { type: Boolean, default: false }, toggleClick: { type: Function, default: null } } } </script>
    
    <style scoped> .hamburger { display: inline-block; cursor: pointer; width: 20px; height: 20px; transform: rotate(90deg); transition: .38s; transform-origin: 50% 50%; } .hamburger.is-active { transform: rotate(0deg); } </style>
    
    
    <style rel="stylesheet/scss" lang="scss" scoped> .app-breadcrumb.el-breadcrumb { display: inline-block; font-size: 14px; line-height: 50px; margin-left: 10px; .no-redirect { color: #97a8be; cursor: text; } } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70]: /images/20221005/3f6ecc63e7f64ba5bae8dbb6a469c646.png
[2021061109134286.png]: /images/20221005/f6d67910378647b8b03f50fd5115cc43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221005/5d4edefccb2940b1af561284b1dcaae7.png