如果一个路径包含 Vue 中的另一个，导航栏一次选择两个抽屉

Question

我正在 Vue.js 中创建一个带有边栏的应用程序。

在 v-list-item 中，在路径 :to="link.route" 中，我使用的是路由名称：{ name: "dashboard" }.

当一个 link 的路径包含在另一个 link 的路径中时，就会出现问题。
例如。 path: '/'（仪表板）包含在 path: '/help'.

中

如果我点击 Help，那么两个侧边栏抽屉都会被选中：

模板：

<template>
  <div>
    <v-navigation-drawer v-model="drawer">
      <v-list nav dense>
        <v-list-item-group>
          <v-list-item
            v-for="link in links"
            :key="link.text"
            :to="link.route">
            <v-list-item-content>
              <v-list-item-title class="white--text">{{
                link.text
              }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

脚本：

<script>
export default {
  data: () => ({
    drawer: true,
  }),
  computed: {
    links() {
      return [
        {
          text: "Dashboard",
          route: { name: "dashboard" },
        },
        {
          text: "Help",
          route: { name: "help" },
        },
      ];
    },
  },
};
</script>

路由器：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '../views/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'dashboard',
    component: Dashboard
  },
  {
    path: '/help',
    name: 'help',
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Answer 1

我通过在仪表板路由声明中添加路径 { name: "dashboard", path:'/' } 解决了我的问题。

之前的代码：

    links() {
      return [
        {
          text: this.$i18n.t("navbar.dashboard"),
          route: { name: "dashboard"},
        },
        {
          text: this.$t("navbar.help"),
          route: { name: "help"},
        },
      ];
    },

之后的代码：

    links() {
      return [
        {
          text: this.$i18n.t("navbar.dashboard"),
          route: { name: "dashboard", path:'/' },
        },
        {
          text: this.$t("navbar.help"),
          route: { name: "help"},
        },
      ];
    },

这不是我想要的，但它解决了问题。

如果一个路径包含 Vue 中的另一个，导航栏一次选择两个抽屉

Navbar selects two drawers at once if one path contains the other in Vue

navigation

routes

sidebar

vue.js