vue3如何隐藏一个路由router,如何在一个路由页面下激活这个路由router？

前言

一般应用场景就是点击或触发一个A.vue页面中按钮或函数时，跳转到另一个路由router（B.vue页面），那么如何在触发时才跳转到另一个路由显示B.vue呢，以及显示在父路由还是子路由呢？

---

一、路由TS文件

1.TS文件路由

import { createRouter, createWebHistory } from 'vue-router';
const base = import.meta.env.VITE_BASE_URL;
export default createRouter({
  history: createWebHistory(base),
  routes: [
    {
      path: '/',
      name: 'index',
      meta: { title: '运维后台' },
      redirect: '/map',
      children: [
        {
          path: '/map',
          name: 'map',
          meta: { title: '地图管理', flat: true },
          redirect: () => ({ name: 'handle' }),
          children: [
            {
              path: 'farmlist',
              name: 'farmlist',
              meta: { title: '成果管理', icon: 'icon-antdesign' },
              component: () => import('../views/result/FarmList.vue'),
            },
            {
              path: 'resultmanage',
              name: 'resultmanage',
              meta: { title: '区域数据管理', icon: 'icon-antdesign', hidden: true, activeMenu: '/map/farmlist' },
              component: () => import('../views/result/ResultManage.vue'),
            },
          ],
        },
      ],
    },
  ],
});

可以看到’区域数据管理’中的 hidden: true, activeMenu: ‘/map/farmlist’ 这两个属性，前者代表隐藏，后者代表激活的“条件”，也就是在**'成果管理’页面中触发激活**，并在 '地图管理’页面下显示（都是 '地图管理’的 children路由）。如图：