I have a vue app with two router-views for the layout and content in the App.vue file:
<router-view name="layout">
<div>
<router-view name="content" />
</div>
</router-view>
The routes are then configured with a layout component as well as a content component:
{
path: "/",
components: {
layout: Layout,
content: ExampleContent
}
}
This is all working correctly. However, I am now trying to add a page using nested routes to render different components inside different vuetify tabs.
new route:
{
path: "/tabs",
components: {
layout: Layout,
content: Tabs
},
children: [
{
path: "one",
component: TabOne
},
{
path: "two",
component: TabTwo
}
]
}
Tabs.vue
<template>
<div>
<h1>Tabs</h1>
<v-tabs>
<v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route" exact>{{
tab.name
}}</v-tab>
</v-tabs>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ id: 1, name: "Tab One", route: `/tabs/one` },
{ id: 2, name: "Tab Two", route: `/tabs/two` },
],
};
},
};
</script>
The tabs are rendered correctly, and go to the correct routes, but without any content. I tried using a router-link instead of the v-tab without success, so I think the issue is related to the router setup, and nothing specific to the tabs.
If I move the "content" router-view outside of the "layout" router view, the tab specific content then shows up correctly, so it seems like there's something with the nesting of the routes/router-views that isn't working, but so far I have been unable to figure out what.
Code sandbox showing the issue here
question from:
https://stackoverflow.com/questions/65831951/no-content-with-vue-router-nested-routes-and-multiple-router-views 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…