vue - in pit - nesting route causes page Jump to empty (page does not display content)

Problems encountered

vue blank page
Use nested sub route to switch the page, the address bar changes, but the content of the sub page is not displayed (blank).

Upper code~~

Nested sub routing code SRC - > router - > router index.js

//...
import Detail2 from '@/components/Detail2'
import Details from '@/components/Details'
//...
export default new Router({
  //  Remove 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 (parent page)

<template>
  <div class="hello">
    <h1>This is a parent page</h1>
    <!-- Dynamically routed to It can't be written in path，Or it won't work -->
    <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 (subpage)

<template>
    <div class="hello">
       <h1>This is a subpage</h1>
        <h4>problem{{$route.params.idvv}}</h4>
        <div>{{questionInfo}}</div>
        <button @click="handleClick" v-show="flag">Next question</button>
    </div>
</template>

<script>
export default {
    name: 'details Name casually',
    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: 'What to eat today?'
              },
                            {
                id: 2,
                title: 'Was it good?'
              },
                            {
                id: 3,
                title: 'Playing mahjong later?'
              }
            ]
        }
    },
    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>

Solution

Method 1: add the mount location of the child page on the parent page < router view / >

Detail2.vue (parent page)

<template>
  <div class="hello">
    <h1>This is a parent page</h1>
    <!-- Dynamically routed to It can't be written in path，Or it won't work -->
    <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>

Knowledge points: the < router View > component is a functional component, and the view component to which the rendering path matches. The components rendered by < router View > can also embed their own < router View > to render nested components according to the nested path.

Method 2:

Change the dynamic route location, without nesting routes, so that the child page and the parent page are displayed at the same level

src->router->index.js

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

Summary: routes are executed in the defined order. Whoever defines them first will use their rules first

1. If the parent route and nested child route are both configured, the parent route will be executed first because it is placed in the above position;
1. The same analogy: if it is placed in the following position, the nested sub routing rule will be executed first.

At the beginning of learning, it is the most easy time to meet and solve problems, and the more easily to get tangled and relieved. I hope this article can help the newcomers a little!