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

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 项目的 link： https://codesandbox.io/s/l41zk6olqz

如果您在沙盒中执行以下步骤，您将看到发生了什么：

在主页页面上，单击 转到列表 link
在列表页面上，单击 转到部分 link
当 Sections 页面加载时，我希望加载默认子路由（名为 route.details），但是，它不会

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

提前致谢。

更新 (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 答案中得到了信息：

更新 (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

我认为这是您从列表路由中路由部分的方式。我已经解决了你的问题，这就是我的解决方案。

对于 List.vue 部分的重定向。

<router-link :to="`/sections//`">Go to Sections</router-link>

Answer 2

这是我发现的有效方法：

...
  {
      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' } 会使父路由重定向到所选的子路由。

Answer 3

您可以从父路由重定向到子路由：

redirect: {
   name: 'route.details'
}

也可以简单地从父项中删除 name 属性并将其移至第一个子项。这可能会引起一些混乱，所以我会选择选项 1。

{
  alias: '',
  path: 'details',
  name: 'route.sections',
  component: Details
}

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

Vue Router default child route not loading initially

javascript

vue.js

vue-router

提前致谢。