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.同理类推：如果它放在了下面位置，那么就先执行嵌套子路由规则。

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