vue nuxt路由嵌套

有的时候我们采用的是二级路由，动态变动某个区域，一级菜单控制页面切换，而二级路由决定了页面内容的变化。原先我想着通过layout来做，那样太傻了，因为每个动态区域的页面你得复制多分，类似router-view,nuxt也有他自己的处理方式。学习自然是先模仿后超越，光看官方文档还是理解不够透彻，实际运行就明白是怎么回事了。
直接上我实际的工程,先看效果

工程目录如下,nywx.vue为主文件,

下面是nywx.vue代码

<template>
    <div class="content">
        <el-container class="content-row">
            <el-aside width="150px">
                <div class="condTitle">
                    <h3><nuxt-link to="/mlll/lmf/nywx/">纳音五行</nuxt-link></h3>
                </div>
                <el-menu >
                    <el-menu-item v-for="(item,index) in nywxs" :key="index" :index="index.toString()" @click="selectMenu(item,index)">{{item.displayField}}</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <nuxt-child keep-alive :info="nyInfo"></nuxt-child>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import {CDD} from '@/utils/constant'
export default {
  components: { },
    layout:'page',
    data(){
        return {
            relation:'',
            nyInfo:{},
            nywxs:[]
        }
    },
    methods:{
        selectMenu(item,index){
            this.nyInfo = {description:item.description,relation:item.displayField}
            this.$router.push({path:'/mlll/lmf/nywx/dyxy'})
        },
        selectTitle(){
            this.$router.push({path:'/mlll/lmf/nywx/'})
        },
        getNywxs(){
            this.$store.dispatch('SelectByFlatType',{type:CDD.NYWX}).then(res=>{
                if (res.success){
                    this.nywxs = res.data;
                } else{
                    console.log(res.msg);
                }
            })
        }
    },
    mounted(){
        this.getNywxs()
    }
}
</script>
<style lang="scss" scoped>
    .condTitle{
        width: 100%;
        background-color: #65b9ff;
        margin: 10px 0px 10px 0px;
        h3 {
            color:#fff;
            line-height: 45px;
            padding-left: 25px;
            font-size: 14px;
            font-weight: normal;
        }
    }
</style>

子路由中index.vue代码

<template>
    <div>
        <div class="headline">纳音五行优点</div>
        <el-row>
          <el-col :span="12">
              <p>
                  以年、时二柱干支，对照后，就可以取出吉凶之主流答案。不会有含糊不确定之模棱两可，
                  可以弥补用神、喜忌之不足。<br/>
                    ——梁湘润,《流年法典》P366
              </p>
          </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    }
}
</script>
<style lang="scss" scoped>
    .headline {
        border-bottom: 1px solid #dcdcdc;
        padding: 5px 0 5px 26px;
        margin-bottom: 0px;
        position: relative;
        font-size: 18px;
        &::after {
            content: "";
            width: 4px;
            height: 16px;
            background-color: #4f71ff;
            display: inline-block;
            position: absolute;
            margin-left: 10px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
</style>

接着看dyxy.vue

<template>
    <div>
        <div>
            {{info.description}}
        </div>
        <el-table :data="tableData" size="small">
            <el-table-column label="年柱" prop="year"></el-table-column>
            <el-table-column label="时柱" prop="hour"></el-table-column>
            <el-table-column label="日主" prop="day"></el-table-column>
            <el-table-column label="旬" prop="xun"></el-table-column>
        </el-table>
    </div>
</template>
<script>

export default {
    name:'nywx-dyxy',
    props:{
        info:Object,
        // relation:String,
    },
    data(){
        return{
            tableData:[],
        }
    },
    methods:{
        getNyJx(val){
            this.$store.dispatch('SelectNyjxByRelation',{relation:val}).then(res=>{
                if (res.success){
                    this.tableData = res.data;
                } else{
                    console.log(res.msg);
                }
            })
        }
    },
    watch:{
        // 切换菜单
        'info.relation':function(val){
            if (val){
                this.getNyJx(val)
            }
        }
    },
    mounted() {
        // 第一次进来
        this.getNyJx(this.info.relation)
    }
}
</script>

下面是参考的推演过程

嵌套路由
Nuxt 路由—03
先仿照示例可以看到嵌套路由，nuxt生成了什么。


上面只是个demo，在实际工程中怎么做呢？

接下来看到与xchh.vue同名目录下生成的嵌套路由,理解这个，下面的事情就很轻松了。