如何在两个不同的子路由中显示一个相同的 Vue 组件？

Question

const routes = [

{

    path: '/',

    component: LogInView

},

{

    path: '/store',

    component: Dashboard,

    children: [

        {

            path: '/products',

            component: ProductsView,

        },

    ]

},

{

    path: '/platform',

    component: Dashboard,

    children: [

        {

            path: '/products',

            component: ProductsView,

        },

    ]

},

{

    path: '/platform',

    component: Dashboard

} ]

假设，我正在尝试为&渲染Dashboard组件，并为&这两个路由渲染组件。但问题是当我点击或url 时，它是渲染组件。/store/platformProductView/store/products/platform/products

/store/products/platform/productsDashboard

Answer 1

您的代码的问题是您在每个子路由（'/products'）删除它之前写了一个斜杠

Answer 2

在您的代码中，您仍然有一条component路线children：{&nbsp; &nbsp; path: '/store',&nbsp; &nbsp; component: Dashboard,&nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: '/products',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: ProductsView,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ]},但是，Vuejs 文档显示父路由中不应该有组件，如下所示：const router = new VueRouter({&nbsp; routes: [&nbsp; &nbsp; { path: '/user/:id', component: User,&nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // UserProfile will be rendered inside User's <router-view>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // when /user/:id/profile is matched&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: 'profile',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: UserProfile&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // UserPosts will be rendered inside User's <router-view>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // when /user/:id/posts is matched&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: 'posts',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: UserPosts&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]})所以，相反，你应该有：const routes = [{&nbsp; &nbsp; path: '/',&nbsp; &nbsp; component: LogInView},{&nbsp; &nbsp; path: '/store',&nbsp; &nbsp; // component: Dashboard, // <-- should be removed&nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: 'products',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: ProductsView,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ]},{&nbsp; &nbsp; path: '/platform',&nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: 'products',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: ProductsView,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ]},{&nbsp; &nbsp; path: '/platform',&nbsp; &nbsp; component: Dashboard} ]@TEFO正确地指出子路由不应包含斜杠