【Vue】路由同名导致页面刷新时渲染不同的组件

vue-router 中相同二级导航的 name 属性重复导致路由错误

原代码

const router = new VueRouter({
  routes: [
    {
      path: "/entrustOperation",
      name: "entrustOperation",
      component: (resolve) =>
        require([
          "@/views/detectingSystem/entrustManage/entrustOperation",
        ], resolve),
    },
    {
      path: "/municipalAdministration/entrustOperation",
      name: "entrustOperation",
      component: (resolve) =>
        require([
          "@/views/detectingSystem/entrustManage/municipalAdministration/entrustOperation",
        ], resolve),
    },
  ],
});

引发的问题

this.$router.push({
  path: "/municipalAdministration/entrustOperation",
});

使用以上代码跳转路由时，初次加载 /municipalAdministration/entrustOperation 页面，刷新页面时加载 /entrustOperation 页面

原因

两个导航都有 /entrustOperation 这个二级导航，刷新时会渲染到第一个写的路由上