vue-router 中某些路由的单独导航抽屉

Posted 2023-02-23

【中文标题】vue-router 中某些路由的单独导航抽屉

【英文标题】：Separate navigation drawers for certain routes in vue-router

【发布时间】：2020-06-10 09:42:58

【问题描述】：

我正在结合 Vuex 和 vue-router 构建一个 Vuetify 应用程序。一些视图使用默认的导航抽屉，但其他视图在其导航抽屉中有不同的项目。 This documentation say 我可以通过 props 来查看组件。所以我是这样实现的：

路由/index.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> 的道具仍然未定义。我在这里做错了什么？

【参考方案1】：

有几个问题...

将= 替换为:...

 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

【参考方案2】：

在你的 routes\index.js 您需要为每个命名视图定义 props 选项：

  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 数组时，您使用了“=”而不是“:”。

您可以使用<router-view name="sidebar"/> 来输出命名的组件。

【讨论】：

我遵循了你的榜样。不幸的是，使用 Vue 工具检查时，items 仍然未定义。

@starleaf1 这个例子有帮助吗？ codesandbox.io/s/awesome-tesla-6z14m