如何在 Vue 中为我的导航添加路线？

Question

我在抽屉中有一个导航，它从数组中呈现标题，现在我希望能够单击并被重定向到另一个页面，但我无法解决这个问题，你能帮我弄清楚如何以正确的方式做到这一点？我正在使用 Vue。

这是我的导航栏：

<template>
  <nav>
    <v-app-bar prominent flat app style="background-color: white;">
      <div class="wrap row">
        <div class="hamburger col-lg-2">
          <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        </div>

        <div class="headerImg col-lg-8">
          <router-link to="/">
            <img class="image" :src="require('../img/eagle.jpg')" />
          </router-link>
        </div>
      </div>
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" app temporary class="navigation">
      <div id="sidebar">
        <div class="SidebarHeader text-center">
          <router-link to="/">
            <div class="img"></div>
          </router-link>
        </div>



        <!-- PARENT -->

        <ul class="idb-nav list-unstyled m-15 p-0">
          <div v-for="(menu, index) in navigation.subnav" :key="index">
            <li class="nav-item" v-if="navigation.route && navigation.route.length">
              <a
                :class="[ 'nav-link', { 'active': menu.active } ]"
                href="javascript:void(0);"
                @click="toggleMenu(index)"
              >
                <i
                  v-if="item.subnav"
                  class="fas"
                  :class="{'fa-chevron-down' :!item.open, 'fa-chevron-up' :item.open}"
                ></i>
                <span class="menu-title">{{navigation.title}}</span>
              </a>

              <!-- CHILDREN -->

              <ul class="list-unstyled sub-menu">
                <router-link
                  tag="li"
                  v-for="(navigation, key) in navigation.subnav"
                  :key="key"
                  :to="subnav.route"
                >
                  <a href="javascript:void(0);" class="sub-menu-nav-link">
                    <span>{{subnav.title}}</span>
                  </a>
                </router-link>
              </ul>
            </li>
            <Dropdown v-if="item.subnav" :list="item" />
          </div>
        </ul>


      </div>
    </v-navigation-drawer>
  </nav>
</template>

<script>
import Dropdown from "./Dropdown";

export default {
  computed: {
    navigation() {
      return this.$store.getters.navigation;
    }
  },
  data() {
    return {
      drawer: false
    };
  },
  components: {
    Dropdown
  }
};
</script>

这是我的 index.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'



Vue.use(Vuex)

export default new Vuex.Store({
  state: {

    navigation: [
      {
        title: "Historia",
        route: './views/Historia'
      },
      {
        title: "Elgitarrer",
        open: false,
        subnav: [
          {
            title: "Solid guitars",
            open: false,
            route: './views/Solid'
          },
          {
            title: "Semi solid guitars",
            open: false,
            route: './views/Semisolid'
          },
          {
            title: "Archtop guitars",
            open: false,
            route: './views/Archtop'
          },
          {
            title: "Thin archtop guitars",
            open: false,
            route: './views/Thinarchtop'
          },
        ]
      },
      {
        title: "Elbasar",
        open: false,
        subnav: [
          {
            title: "Kontrabas",
            open: false,
            route: './views/Kontrabas'
          },
          {
            title: "Bas",
            open: false,
            route: './views/Bas'
          },
        ]
      },
      {
        title: "Akustiskt",
        open: false,
        subnav: [
          {
            title: "Nylonsträngade",
            open: false,
            route: './views/Nylon'
          },
          {
            title: "Stålsträngade",
            open: false,
            route: './views/Steel'
          },
          {
            title: "Akustisk bas",
            open: false,
            route: './views/Akustiskbas'
          },
        ]
      },
      {
        title: "Övrigt",
        open: false,
        subnav: [
          {
            title: "Banjo/Mandolin",
            open: false,
            route: './views/BanjoMandolin'
          },
          {
            title: "Ukulele",
            open: false,
            route: './views/Ukulele'
          },
        ]
      },
      {
        title: "Kontakt",
        open: false,
        route: './views/Kontakt'
      },
    ],

  },
  getters: {
    navigation: state => {
      return state.navigation;
    }
  }
})

请帮帮我！

/丽莎

Answer 1

您正在使用 vuex 进行路由，而不是使用 vue-router 插件。在 vue 文档中有一个章节是关于路由你的应用程序https://router.vuejs.org/guide/#javascript

Answer 2

谢谢，但是我必须卸载 vuex 才能使用 vue-router 插件吗？还是我保持原样？

Answer 3

我认为您的问题在于您的router-link 循环：

<router-link
  tag="li"
  v-for="(navigation, key) in navigation.subnav"
  :key="key"
  :to="subnav.route"
>
  <a href="javascript:void(0);" class="sub-menu-nav-link">
    <span>{{subnav.title}}</span>
  </a>
</router-link>

您必须使用代表它的变量（在您的情况下为navigation）访问每个迭代。因此，它应该是这样的：

<router-link
  tag="li"
  v-for="(navigation, key) in navigation.subnav"
  :key="key"
  :to="navigation.route"
>
  <a href="javascript:void(0);" class="sub-menu-nav-link">
    <span>{{navigation.title}}</span>
  </a>
</router-link>

话虽如此，route 属性中表示的字符串（例如'./views/Archtop'）在 vue-router 方面不是有效的路由路径，它看起来像是对组件本身的引用，应该在vue-router 实例中对应的路由对象。

有关 vue-router 的更多信息，请参阅docs。