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

Posted

技术标签:

【中文标题】Vue Router 默认子路由最初未加载【英文标题】:Vue Router default child route not loading initially 【发布时间】:2019-08-24 07:54:27 【问题描述】:

我已经设置了一个简单的 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

如果您在沙盒中按照这些步骤操作,您会看到发生了什么:

    主页页面上,点击转到列表链接 在列表页面上,点击Go to Sections链接 当 Sections 页面加载时,我期待默认子路由(名为 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://***.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 ",现在当用户访问父路由器时会加载默认子路由。

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

【问题讨论】:

【参考方案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' 会使父路由重定向到所选的子路由。

【讨论】:

我看到你自己找到了答案。如果它解决了您的问题,您应该将其标记为正确答案。 @Kordonme - 我会在 2 天内 :) 谢谢。【参考方案2】:

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

用于将 List.vue 重定向到部分。

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

【讨论】:

嗨,Kyle - 事实证明,这取决于具有名称的父路由,而 router-link 需要指向默认的子路由。见-***.com/a/50065601/9127864我还是很好奇是否有可能让route-link指向父路由,然后父路由重定向到默认子路由。【参考方案3】:

你可以从父路由重定向到子路由:

redirect: 
   name: 'route.details'

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


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

【讨论】:

以上是关于Vue Router 默认子路由最初未加载的主要内容,如果未能解决你的问题,请参考以下文章

vue之路由以及默认路由跳转

Vue路由进阶

Vue 默认路由 与路由嵌套

vue router 多路由及路由嵌套

路由的默认 vue-cli 延迟加载代码在定义为 lambda 时不起作用

嵌套的 Vue 子路由不会自动加载