有没有童鞋遇到过同样的问题：vue命名视图问题

Question

问题描述
请问一个组件内部引用了命名视图，在index.js中定义了这个命名视图的router，为什么命名视图显示不出来呢？浏览器访问的是http://localhost:8080/#/test
问题出现的环境背景及自己尝试过哪些方法
相关代码
//请把代码文本粘贴到下方（请勿用图片代替代码）index.js
importVuefrom'vue'
importRouterfrom'vue-router'
importHelloWorldfrom'@/components/HelloWorld'
importtestfrom'@/components/test1'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'HelloWorld',
component:HelloWorld
},
{
path:'/test',
name:'test',
components:{
default:test,
hello:HelloWorld
}
}
]
})
test1.vue
你期待的结果是什么？实际看到的错误信息又是什么？
期待的结果是页面显示123和HelloWorld.vue文件的内容

Answer 1

在test1里写的router-view展示的是test1的子路由，你并没有给test1配置children你配置的是在/test这个路由下有两个组件test和HelloWorld，他俩要一起展示，应该写一起你可以这么写尝试一下，梳理一下关系App.vuerouter/index.jsimportVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/components/HelloWorld'importtestfrom'@/components/test1'//这个是test子路由的组件importtestChildfrom'@/components/testChild'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'HelloWorld',component:HelloWorld},{path:'/test',name:'test',components:{default:test,hello:HelloWorld},children:[{path:'testChild',component:testChild}]}]})test1.vue我是testtestChild.vue我是testChild这样在/根路由就显示HelloWorld组件，在/test路由下显示test和HelloWorld组件（他俩是兄弟），在/test/testChild路由下testChild会在test里（他俩是父子）

Answer 2

进入到你所说的路径首先匹配的是根路径，显示的将会是HelloWorld.vue组件中的内容，可以贴一下该组件中有没有提供对应的路由出口。发现上面不是嵌套路由，那么按照需求要显示的话，需要在根模板中提供路由出口。constHelloWorld={template:`我是HelloWorld组件中的文本内容。`};constTest={template:`我是Test组件中的文本内容。`};constrouter=newVueRouter({routes:[{path:'/',component:HelloWorld},{path:'/test',components:{default:Test,hello:HelloWorld}}]});newVue({el:'#app',router});