Как я могу показать один и тот же компонент Vue в двух разных суб-маршрутах? - PullRequest
Новая
       45

Как я могу показать один и тот же компонент Vue в двух разных суб-маршрутах?

0 голосов
/ 21 марта 2020 
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 компонент для /store & /platform и ProductView компонент для /store/products & /platform/products этих двух маршрутов.

Но проблема в том, что когда я нажимаю /store/products или /platform/products url, он рендерит Dashboard компонент.

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

В ваших кодах у вас все еще есть component на маршруте с children: 

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

Однако документация Vuejs показывает, что не следует не может быть компонентом в родительском маршруте, например: 

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 было правильно указано что дочерний маршрут НЕ должен содержать sla sh

0 голосов
/ 21 марта 2020

Проблема с вашим кодом в том, что вы пишете sla sh перед тем, как каждый дочерний маршрут ('/ products') удаляет его

...