router的动态切换$route.meta.title

router的动态切换$route.meta.title

这里主要是 meta 属性下面设置一个自定义的键值 title
这个技术可以用来做什么？
在头部nav切换选中效果，在二级页面或者三级页面也具有此切换选中的效果。
在layout中
template中 使用v-for渲染页面

      <div
        v-for="(item,index) in titleList"
        :key="item.name"
        class="tab-list-item"
        @click="changeActiveIndex(item,index)"
      >
        <span class="tab-list-span" :style="{color:(item.name==$route.meta.title?'white':'')}">
          <svg-icon :icon-class='item.iconName'></svg-icon>
          {{ item.name }}
        </span>
        <img
          v-if="item.name==$route.meta.title"
          src="../../assets/img/templeChoose.png"
          :style="item.style"
          class="itembg"
          alt=""
        >
      </div>

js中的数据

                titleList: [
                    {
                      name: '可视化指挥中心',
                        style: {
                             width: '175px',
                          top:0,
                          marginLeft:'8px',
                          marginTop: '8px',
                          height: '35px',

                        },
                        iconName: 'tar1',
                        route: '/newView'
                    },
                    {
                      name: '数据综合治理中心',
                        style: {
                             width: '190px',
                          top:0,
                          marginLeft:'9px',
                          marginTop: '8px',
                          height: '35px',
                        },
                      iconName: 'tar2',
                        route: '/newDate',
                    },
                    {
                      name: '可视化专题图',
                        style: {
                             width: '150px',
                          top:0,
                          marginLeft:'15px',
                          marginTop: '8px',
                          height: '35px',
                        },
                        iconName: 'tar3',
                        route: '/newDraw'
                    },
                    {
                      name: '大数据统计分析',
                        style: {
                             width: '165px',
                          top:0,
                          marginLeft:'14px',
                          marginTop: '8px',
                          height: '35px',
                        },
                        iconName: 'tar4',
                        route: '/newTotal'
                    },
                    {
                      name: '数据上报系统',
                        style: {
                             width: '155px',
                          top:0,
                          marginLeft:'14px',
                          marginTop: '8px',
                          height: '35px',
                        },
                        iconName: 'tar5',
                        route: '/newUp'
                    },
                    {
                      name: '指挥中心',
                        style: {
                             width: '110px',
                          top:0,
                          marginLeft:'17px',
                          marginTop: '8px',
                          height: '35px',
                        },
                        iconName: 'tar6',
                        route: '/newF'
                    }
                ],
                activeIndex: '指挥中心'
            }
        }

router中的路由格式

      { //人员信息管理库
        path: "/newDate/PeopelKu",
        name: 'PeopelKu',
        component: () => import('@/views/newDate/PeopelKu'),
        meta: {
          title: '数据综合治理中心',
          showSearch: false,
          templeChoose: false
        },
      },

参考地址：https://blog.csdn.net/qq_36410795/article/details/89792782