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 默认子路由最初未加载的主要内容,如果未能解决你的问题,请参考以下文章