vue router迷惑之嵌套路由path问题

前端这点事 2020年07月09日 15:27 852 0

每次配置vue的时候，总会想到到底是children是配置完整的还是相对的路由呢？？

通过查询了官方文档，看到如下解释：

vue router迷惑之嵌套路由path问题-第1张图片-前端这点事

其实官方推荐还是配置相对路由的，那行吧！就按官方解释来配置好了，可是redirect配置相对路径似乎并不生效。

经过查询，发现下面一种配置：

vue router迷惑之嵌套路由path问题-第2张图片-前端这点事

最后得出一个结论，配置子路由的时候，可以省略父路由的路径，但是在做重定向的时候，还是需要填写完整路径的，最后附上自己搭建项目的路由配置：

const asyncRoutes = [
  {
    path: '/',
    component: resolve => require(['@/layout'], resolve),
    redirect: '/base-data',
    children: [
      {
        path: "/base-data",
        component: resolve => require(["@/views/base-data"], resolve),
        meta: {
          mainNavId: '1',
          name: "基础数据",
        },
        redirect: "/base-data/event-analysis",
        children: [
          {
            path: "event-analysis",
            component: resolve => require(["@/views/base-data/event-analysis"], resolve),
            meta: {
              mainNavId: '1',
              defaultOpenId: '1-1',
              name: "事件分析",
              icon: 'area-chart'
            },
            redirect: "/base-data/event-analysis/overview",
            children: [
              {
                path: "overview",
                component: resolve =>
                  require(["@/views/base-data/event-analysis/overview"], resolve),
                meta: {
                  mainNavId: '1',
                  defaultOpenId: '1-1',
                  asideNavId: '1-1-1',
                  name: "概况",
                }
              },
              {
                path: "customize",
                component: resolve =>
                  require(["@/views/base-data/event-analysis/customize"], resolve),
                meta: {
                  mainNavId: '1',
                  defaultOpenId: '1-1',
                  asideNavId: '1-1-2',
                  name: "自定义分组"
                }
              }
            ]
          }
        ]
      }
    ]
  }
];

export default asyncRoutes;

标签： Vue

本文地址： https://www.ltonus.com/Vue/vue-router-config.html

文章来源：前端这点事