Vue.js vue路由器中特定路由的独立导航抽屉
我正在结合Vuex和vue路由器构建Vuetify应用程序。某些视图使用默认的导航抽屉,但其他视图的导航抽屉中有不同的项。我可以传递道具来查看组件。所以我实现它如下: routes/index.js src/App.vue 但显然 src/components/CourseNavBar.vueVue.js vue路由器中特定路由的独立导航抽屉,vue.js,vuetify.js,vue-router,Vue.js,Vuetify.js,Vue Router,我正在结合Vuex和vue路由器构建Vuetify应用程序。某些视图使用默认的导航抽屉,但其他视图的导航抽屉中有不同的项。我可以传递道具来查看组件。所以我实现它如下: routes/index.js src/App.vue 但显然 src/components/CourseNavBar.vue 但他的道具还没有定义。我做错了什么?有几个问题 替换为: 侧边栏组件而不是路由器视图应该位于导航抽屉的插槽中 演示:在您的 routes\index.js 您需要为每个命名视图定义“道具”选项: {
但他的道具还没有定义。我做错了什么?有几个问题 替换为: 侧边栏组件而不是路由器视图应该位于导航抽屉的插槽中 演示:在您的 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值分配给props items数组时,您使用了=而不是:
您可以使用输出命名组件。我已经按照您的示例进行了说明。遗憾的是,当使用Vue工具检查时,项仍然未定义。@starleaf1此示例有帮助吗?
<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>
<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>
items: [
{ text:"Link 1", href:"/link1" },
{ text:"Link 2", href:"/link2" }
]
<v-navigation-drawer><sidebar :items="items"></sidebar></v-navigation-drawer>
{
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" }
]
}
}