使用框架：ruoyi-vue,element-ui

需求：在客户列表点击跳转至客户的订单页面，同时以被点击客户的信息直接查询，但在面包屑的标题上，和普通打开订单的页面一致，即使可以在router的meta中设置title使其和普通打开的情况，title不一样，但从客户列表打开的多了，路由页面还是都一样，让人混淆，不雅观。
像这样：

一开始想到面包屑和导航栏都是通过$route.meta.title设置的，那就在order/index.vue中
this.$route.meta.title=this.$route.params.customerName+"的订单";
取出来并设置上，但是结果发现，导航栏的结果永远在下一次打开同一个页面才渲染。

解决：

1.配置router传值

本来是直传个用户id给订单页，但到了订单页再请求出客户名就已经太晚了，页面都渲染完了。

{
    path: '/order/',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'index/:customerId/:customerName',
        component: (resolve) => require(['@/views/order/order/index'], resolve),
        name: 'customerOrder',
        meta: {
          //函数
          title: params=>{return params.customerName+'の订单'},
          // title: '客户の订单',
          activeMenu: '/order/order'
        }
      }
    ]
  }

path只写一层order，使路由页面和原页面可以同时打开。

2.修改面包屑的代码

src/components/Breadcrumb/index.vue

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
      	<!-- 原代码 -->
		<!-- <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>-->
		
		<!-- 新代码 -->
        <span v-if="item.meta.title&&typeof item.meta.title === 'function'">{{ item.meta.title($route.params) }}</span>
        <!-- 新代码 -->
        
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

3.修改导航栏

src/layout/components/TagsView/index.vue

<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        :style="activeStyle(tag)"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
		<!-- 原代码       {{ tag.title }}-->

		<!-- 新代码 -->
        <span v-if="tag.title && typeof tag.title === 'function'">{{ tag.title(tag.params)}}</span>
        <span v-else>{{tag.title}}</span>
 		<!-- 新代码 -->    
 		   
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 刷新页面</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 关闭当前</li>
      <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 关闭其他</li>
      <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 关闭左侧</li>
      <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 关闭右侧</li>
      <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 全部关闭</li>
    </ul>
  </div>
</template>

4.客户列表跳转处

5.订单页

这就实现了

效果：

未解决

还有一个没解决的问题,浏览器的标题，把meta.title中的函数直接展示了，欢迎大家探讨

参考资料:https://blog.csdn.net/denglouhen/article/details/114263160