前言
记录一下nuxt嵌套路由组件的使用
Nuxt嵌套路由
通过vue-router的子路由创建Nuxt.js应用的嵌套路由。
创建内嵌子路由，需要添加一个Vue文件，同时添加一个与该文件同名的目录用来存放子视图组件
Warning: 别忘了在父组件(.vue文件) 内增加 用于显示子视图内容。
文档地址：嵌套路由-NuxtJS
个人测试demo
vuetify v-tabs组件+传值
//pages/parent.vue 形式更好看点可以把n修改为(n, content)放到data里
<v-tabs
v-model="tabs"
background-color="grey darken-4"
dark
style="border-radius: 5px"
>
<v-tab
v-for="n in 3"
:key="n">
<nuxt-link to="/parent/child1" v-if="n===1" >
全部
</nuxt-link>
<nuxt-link to="/parent/child2" v-if="n===2" >
精品
</nuxt-link>
<nuxt-link to="/parent/child3" v-if="n===3">
求职
</nuxt-link>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs" keep-alive>
<v-tab-item>
<nuxt-child keep-alive :foobar="111"/>
</v-tab-item>
<v-tab-item>
<nuxt-child keep-alive :foobar="222"/>
</v-tab-item>
<v-tab-item>
<nuxt-child keep-alive :foobar="333"/>
</v-tab-item>
</v-tabs-items>
说一下这里会出现只有点击字才能跳转的问题
有两种解决方法：
- 将CSS中a标签设置为width:100%.这样就能响应整个标签点击了，坏处是不符合解耦合思想，改变了原本的页面布局
- 如果想要解耦合可改写为
<v-tabs>
<v-tab v-for="tab of tabs" :key="tab.id" :to="tab.route" ripple>
{{tab.name}}
</v-tab>
<!-- 如果想要保存tabs切换的效果-->
<!-- <v-tab-item id="/articles">-->
<!-- <router-view v-if="active === '/articles'" />-->
<!-- </v-tab-item>-->
<!-- <v-tab-item id="/essence">-->
<!-- <router-view v-if="active === '/essence'" />-->
<!-- </v-tab-item>-->
<!-- <v-tab-item id="/school">-->
<!-- <router-view v-if="active === '/school'" />-->
<!-- </v-tab-item>-->
</v-tabs>
<router-view/>
子组件
//pages/parent/child1.vue 其他情况类似
<template>
<v-card>
<v-card-text>
全部
foobar:{{foobar}}
</v-card-text>
</v-card>
</template>
<script>
export default {
props: ['foobar']
}
</script>
实现效果
对应页面url也会做相应的改变
