vue-入坑--嵌套路由 导致 页面跳转 为空问题（子页面内容不显示）

vue-入坑–嵌套路由导致页面跳转为空问题（页面不显示内容）

遇到的问题

vue 空白页面
使用嵌套子路由切换页面，地址栏有变化，但是子页面内容没有显示（一片空白）。

上代码~~

嵌套子路由代码 src->router->index.js

//...
import Detail2 from '@/components/Detail2'
import Details from '@/components/Details'
//...
export default new Router({
  //  去掉 http://localhost:8080/#的#
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'myHello',
      component: MyHello
    },
    {
      path: '/Detail2',
      name: 'Detail2',
      component: Detail2,
      children: [
        {
          path: '/Details/:idvv',
          name: 'Details',
          component: Details
        }
      ]
    } 
  ]
})

Detail2.vue （父页面）

<template>
  <div class="hello">
    <h1>这是一个父页面</h1>
    <!-- 动态路由的to里不能写path，不然就不管用了 -->
    <ul  v-for="item in question" >
    <li>
       <router-link :to="{name: 'Details', params: {idvv: item.id}}">{{item.info}}</router-link>
    </li>
    </ul>  
  </div>
</template>

<script>

    export default {
        data (){
          return {
            question: [
               {
                id: 1,
                info: 'About question1'
                },
              {
                id:2,
                info: 'About question2'
              },
              {
                id:3,
                info: 'About question3'
              }
            ]
          }
        }
    }


</script>

Details.vue （子页面）

<template>
    <div class="hello">
       <h1>这是一个子页面</h1>
        <h4>问题{{$route.params.idvv}}</h4>
        <div>{{questionInfo}}</div>
        <button @click="handleClick" v-show="flag">下一个问题</button>
    </div>
</template>

<script>
export default {
    name: 'details隨便命名',
    beforeRouteUpdate (to, from, next){
        this.getData(to.params.idvv)
        next();
    },
    mounted () {
        this.getData(this.$route.params.idvv)
    },
    data () {
        return {
            questionInfo: '',
            curId: '',
            flag: true,
            question: [
              {
                id: 1,
                title: '今天吃什么？'
              },
                            {
                id: 2,
                title: '好吃吗？'
              },
                            {
                id: 3,
                title: '待会打打麻将？'
              }
            ]
        }
    },
    methods: {
        handleClick() {
            this.$router.push({
                name: 'Details',
                params: {
                    idvv: this.curId + 1
                }
            })
        },
        getData (id){
            const index = this.question.findIndex(item => item.id === id);
            console.log(index);
            if(index == -1){
                this.flag = false;
            }else{
                this.questionInfo = this.question[index].title;
                this.curId = id;
                this.flag = true;
            }
        }
    }
}
</script>

解决的方法

方法1：父页面添加子页面挂载的位置点 <router-view/>

Detail2.vue （父页面）

<template>
  <div class="hello">
    <h1>这是一个父页面</h1>
    <!-- 动态路由的to里不能写path，不然就不管用了 -->
    <ul  v-for="item in question" >
    <li>
       <router-link :to="{name: 'Details', params: {idvv: item.id}}">{{item.info}}</router-link>
    </li>
    </ul>
   <br/>  
   <router-view/>
  </div>
</template>

<script>

    export default {
        data (){
          return {
            question: [
               {
                id: 1,
                info: 'About question1'
                },
              {
                id:2,
                info: 'About question2'
              },
              {
                id:3,
                info: 'About question3'
              }
            ]
          }
        }
    }


</script>

知识点：<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

方法2：

改动动态路由位置，不用嵌套路由，让子页面和父页面同级显示

src->router->index.js

export default new Router({
  //  去掉 http://localhost:8080/#的#
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'myHello',
      component: MyHello
    },
    {
      path: '/Detail2',
      name: 'Detail2',
      component: Detail2
    },
    {
      path: '/Details/:idvv',
      name: 'Details',
      component: Details
    } 
  ]
})

总结：路由是按定义的顺序执行的，谁先定义就先用谁的规则

1.上面如果父级路由和嵌套子级路由都配置了，那么会先执行父级路由，因为它放在了上面位置；
1.同理类推：如果它放在了下面位置，那么就先执行嵌套子路由规则。

刚开始学，是最容易遇见问题和解决问题的时候，越是最容易纠结和释怀的时候，希望本文对初入学者有一点点的帮助！【语来了】