Vue路由器默认子路由最初未加载

Question

我已经建立了一个简单的Vue（带有vue-router和Vuetify）项目，并且尝试获取访问父路由时要加载的默认子路由。

我已经竭尽全力按照Vue文档进行操作，但是默认的子路径在访问父路径时不会加载。

这是router.js文件中的代码：

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home'
import Details from './views/Details'
import List from './views/List'
import NotFound from './views/NotFound'
import Secondary from './views/Secondary'
import Sections from './views/Sections'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'route.home',
      component: Home
    },
    {
      path: '/list',
      name: 'route.list',
      component: List
    },
    {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    },
    {
      path: '*',
      name: 'route.notfound',
      component: NotFound
    }
  ]
})

这是CodeSandbox.io项目的链接：https ://codesandbox.io/s/l41zk6olqz

如果您在沙盒中执行以下步骤，您将看到正在发生的事情：

1. 在主页上时，单击“ 转到列表”链接
2. 在“ 列表”页面上，单击“ 转到部分”链接
3. 当第页面加载，我期待的缺省路由的孩子（名为route.details负载），但是，它不

如果单击选项卡列表中的“ 详细信息”链接，则会加载“ 详细信息”页面。我确定这是一个简单的错误，但是我看不到树木的木头。

提前致谢。

更新（2019-04-03 @ 07:00）：进行了进一步的挖掘，以下内容似乎有效： router.js

...
  {
      props: true,
      path: '/sections/:id',
      // name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

然后将“ router-link从” 更改:to="{ name: 'route.sections', params: { id: 1 } }"为“ :to="{ name: 'route.details', params: { id: 1 } }" 现在”将解析默认的子路由。这是预期的吗？我从这个SO答案中获得了信息：https : //stackoverflow.com/a/50065601/9127864

更新（2019-04-03 @ 07:28）：进一步挖掘表明这也是可能的： router.js

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

然后，我可以将其更改router-link为:to="{ name: 'route.sections', params: { id: 1 } }"，当用户访问父路由器时，默认的子路由现在会加载。

希望这会在将来对其他人有所帮助。

Answer 1

这是我发现的工作：

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

redirect: { name: 'route.details' }现在添加使父路由重定向到所选的子路由。