vue 路由跳转请教

Question

componentA

<router-view />

<div>
// 省略代码
</div>

componentB

<div>
 这里需要跳转到 componentA
<router-link  :to="{name:'A',params:{参数}}" tag="div">toA</router-link>
</div>

componentC

<div>
    这里需要跳转到 componentA
<router-link  :to="{name:'A',params:{参数}}" tag="div">toA</router-link>
</div>

 {
        path: '/',
        name: 'A',
        component: () => import( '../views/componentA.vue'),
        children: [
            {path: 'b', name: 'B', component: () => import('../views/componentB.vue')},
            {path: 'c', name: 'C', component: () => import('../views/componentC.vue')},
        ]
    },

但是点击跳转路由后 原本要是再App.vue 的 router-view 打开 componentA 但是奇葩的是居然打不开 咋操作呢?

Answer 1

从路由配置文件看，默认'/',加载了componentA组件。如果App.vue里面存在<router-view />，默认加载componentA组件应该没问题

Answer 2

路由配置这里，你没配置 App.vue 吖

在main.js里render: h => h(App),这里配置了项目入口
如果想要 App.vue 里能映射 componentA 组件, App.vue 里要有<router-view />
并且路由配置

 {
        path: '/',
        component: () => import( '../views/App.vue'),
        children: [{
            path: 'a',
            name: 'A',
            component: () => import('../views/componentA.vue')},
            children: [
                {path: 'b', name: 'B', component: () => import('../views/componentB.vue')},
                {path: 'c', name: 'C', component: () => import('../views/componentC.vue')},
            ]
        ]
    },