Отдельные навигационные ящики для определенных маршрутов в vue -рутер

Question

Я создаю приложение Vuetify в сочетании с Vuex и vue -router. В некоторых представлениях используется ящик навигации по умолчанию, а в других в ящиках навигации есть разные элементы. В этой документации сказано: Я могу передать реквизиты для просмотра компонентов. Поэтому я реализую это так:

маршрутов / индекс. js

{
  path: '/courses/:courseId/lessons/:lessonId',
  name: 'Course 1',
  components: {
    default: () => import('@/views/ViewLesson.vue'),
    sidebar: () => import('@/components/CourseNavBar/CourseNavBar.vue')
  },
  props: {
    items: [
      { text: "Link 1", href:"/link1" },
      { text: "Link 2", href:"/link2" }
    ]
  }
}

src / App. vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
    <h1>My Project</h1>
    </v-app-bar>
    <v-navigation-drawer><router-view :items="items" name="sidebar"/></v-navigation-drawer>
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

Но, видимо,

src / components / CourseNavBar. vue

<template>
  <!-- <v-navigation-drawer :value="1"> -->
    <v-list dense>
      <navbar-item v-for="(item, i) in items" :key="i" :item="item" >
        {{ item.text }}
      </navbar-item>
    </v-list>
  <!-- </v-navigation-drawer> -->
</template>

<script>
import NavBarItem from './NavBarItem.vue'
export default {
  props: {
    items: Array
  },
  components: {
    'navbar-item': NavBarItem
  }
}
</script>

Но реквизиты <CourseNavBar> по-прежнему не определены. Что я тут не так делаю?

Answer 1

В вашем routes\index.js вам нужно определить опцию реквизита для каждого из названных представлений:

{
  path: '/courses/:courseId/lessons/:lessonId',
  name: 'Course 1',
  components: {
    default: () => import('@/views/ViewLesson.vue'),
    sidebar: () => import('@/components/CourseNavBar/CourseNavBar.vue')
  },
  props: {
    default: true,
    sidebar: true,
    items: [
      { text: "Link 1", href: "/link1" },
      { text: "Link 2", href: "/link2" }
    ]
  }
}

И, следуя сказанному @Zim, вы использовали "=" вместо " : "при назначении значения href массиву элементов реквизита.

Вы можете использовать <router-view name="sidebar"/> для вывода именованного компонента.

Answer 2

Есть несколько проблем ...

Заменить = на : ...

 items: [
    { text:"Link 1", href:"/link1" },
    { text:"Link 2", href:"/link2" }
  ]

И компонент sidebar (не вид с маршрутизатора) должен быть в слоте для navigation-drawer ...

<v-navigation-drawer><sidebar :items="items"></sidebar></v-navigation-drawer>

Демо: https://codeply.com/p/oNInfpTwvK