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

【问题标题】：How can I show one same Vue component in two different sub route?如何在两个不同的子路由中显示一个相同的 Vue 组件？
【发布时间】：2020-03-21 16:25:53
【问题描述】：

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
} ]

假设，我正在尝试为/store 和/platform 渲染Dashboard 组件，和/store/products 和/platform/products 这两条路线的ProductView 组件。

但问题是当我点击/store/products 或/platform/products url 时，它正在呈现Dashboard 组件。

【问题讨论】：

标签： javascript vue.js routing routes vue-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

在您的代码中，您仍然有一个component 在带有children 的路线上：

{
    path: '/store',
    component: Dashboard,
    children: [
        {
            path: '/products',
            component: ProductsView,
        },
    ]
},

但是，Vuejs documentation 表明父路由中不应该有组件，如下所示：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

因此，您应该拥有：

const routes = [
{
    path: '/',
    component: LogInView
},
{
    path: '/store',
    // component: Dashboard, // <-- should be removed
    children: [
        {
            path: 'products',
            component: ProductsView,
        },
    ]
},
{
    path: '/platform',
    children: [
        {
            path: 'products',
            component: ProductsView,
        },
    ]
},
{
    path: '/platform',
    component: Dashboard
} ]

@TEFO 正确地指出子路由不应包含斜杠

【讨论】：