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

前端这点事 304 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

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~