如何在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