vue

2024-01-17 10:40| 来源: 网络整理| 查看: 265

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 （父页面）这是一个父页面 {{item.info}} export default { data (){ return { question: [ { id: 1, info: 'About question1' }, { id:2, info: 'About question2' }, { id:3, info: 'About question3' } ] } } } Details.vue （子页面）这是一个子页面问题{{$route.params.idvv}} {{questionInfo}} 下一个问题 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; } } } } 解决的方法方法1：父页面添加子页面挂载的位置点 Detail2.vue （父页面）这是一个父页面 {{item.info}} export default { data (){ return { question: [ { id: 1, info: 'About question1' }, { id:2, info: 'About question2' }, { id:3, info: 'About question3' } ] } } }

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

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

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

【本文地址】

vue

vue

今日新闻

推荐新闻