导航抽屉 - 如何声明我的链接？

Question

我已经设置了一个导航抽屉，带有一个下拉菜单，现在我不知道我如何声明/编写这样当我点击导航中的名称时，它会将我重定向到我希望它重定向的路线到。如何申报？

这是我在 Store 中的 index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import Kontakt from '../views/Kontakt'
import Historia from '../views/Historia.vue'
import Solid from '../views/Solid'
import Semisolid from '../views/Semisolid'
import Archtop from '../views/Archtop'
import Thinarchtop from '../views/Thinarchtop'
import Kontrabas from '../views/Kontrabas'
import Nylon from '../views/Nylon'
import Steel from '../views/Steel'
import BanjoMandolin from '../views/BanjoMandolin'
import Bas from '../views/Bas'
import Akustiskbas from '../views/Akustiskbas'
import Ukulele from '../views/Ukulele'

Vue.use(VueRouter)



Vue.use(Vuex)

export default new Vuex.Store({
  state: {

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

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

这是我的路由器文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Startsida from '../views/Startsida.vue'
import Kontakt from '../views/Kontakt'
import Historia from '../views/Historia.vue'
import Solid from '../views/Solid'
import Semisolid from '../views/Semisolid'
import Archtop from '../views/Archtop'
import Thinarchtop from '../views/Thinarchtop'
import Kontrabas from '../views/Kontrabas'
import Nylon from '../views/Nylon'
import Steel from '../views/Steel'
import BanjoMandolin from '../views/BanjoMandolin'
import Bas from '../views/Bas'
import Akustiskbas from '../views/Akustiskbas'
import Ukulele from '../views/Ukulele'

Vue.use(VueRouter)

  const routes = [
    {
      path: '/',
      name: 'Startsida',
      component: Startsida
    },
    {
      path: '/Kontakt',
      name: 'Kontakt',
      component: Kontakt
    },
    {
      path: '/Historia',
      name: 'Historia',
      component: Historia
    },
    {
      path: '/Solid',
      name: 'Solid guitars',
      component: Solid
    },
    {
      path: '/Semisolid',
      name: 'Semi solid guitars',
      component: Semisolid
    },
    {
      path: '/Archtop',
      name: 'Archtop guitars',
      component: Archtop
    },
    {
      path: '/Thinarchtop',
      name: 'Thin archtop guitars',
      component: Thinarchtop
    },
    {
      path: '/Kontrabas',
      name: 'Kontrabas',
      component: Kontrabas
    },
    {
      path: '/Bas',
      name: 'Bas',
      component: Bas
    },
    {
      path: '/Nylon',
      name: 'Nylonsträngade',
      component: Nylon
    },
    {
      path: '/Steel',
      name: 'Stålsträngade',
      component: Steel
    },
    {
      path: '/Akustiskbas',
      name: 'Akustisk bas',
      component: Akustiskbas
    },
    {
      path: '/BanjoMandolin',
      name: 'Banjo/Mandolin',
      component: BanjoMandolin
    },
    {
      path: '/Ukulele',
      name: 'Ukulele',
      component: Ukulele
    }
  ]

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

export default router

这里是我如何尝试设置我的导航栏并试图弄清楚我是如何声明路由的（顺便说一句，我的路由正在工作，但我不知道如何在链接中声明它们。）：

<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="picture" :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 id="img"></div>
          </router-link>
        </div>



        <div id="sidebar">
          <ul id="navigation">
            <li v-for="(item, index) in navigation" :key="'item'+index">
              <i
                v-if="item.children"
                class="fas"
                :class="{'fa-chevron-down':!item.open,
                    'fa-chevron-up':item.open}"
              ></i>
              <div class="title" @click="item.open = !item.open" :to="item.path">{{ item.title }}</div>
              <Dropdown v-if="item.children" :list="item" />
            </li>
          </ul>
        </div>
      </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>

这里是下拉菜单，我已将其导入导航文件。 ：

<template>

  <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
    <ul v-show="list.open" class="sub-items">
      <li class="sub-item" v-for="(item, index) in list.children" :key="'item'+index">
        <i
          v-if="item.children"
          class="fas"
          :class="{'fa-chevron-up':!item.open,
                    'fa-chevron-down':item.open}"
        ></i>
        <div class="title" @click="item.open = !item.open"><router-link :to="item.path">{{ item.title }}</router-link></div>

        <Dropdown class="children" v-if="item.children" :list="item" router-link :to="children.path"/>

      </li>
    </ul>
  </transition>
</template>

<script>
export default {
  name: "Dropdown",
  props: ["list"],
  methods: {
    enter(el) {
      el.style.height = "auto";

      const height = getComputedStyle(el).height;

      el.style.height = 0;

      getComputedStyle(el);

      setTimeout(() => {
        el.style.height = height;
      });
    },
    afterEnter(el) {
      el.style.height = "auto";
    },
    leave(el) {
      el.style.height = getComputedStyle(el).height;

      getComputedStyle(el);

      setTimeout(() => {
        el.style.height = 0;
      });
    }
  }
};
</script>

我知道我正在使用 Vuex，也许它不是最好的方法，但请帮助我解决这个问题！ 我不会让它工作，即使我多么努力.. :(

/丽莎

Answer 1

在我看来，您的 vuex 文件中可能存在问题，例如：

      {
        title: "Semi solid guitars",
        open: false,
        path: Semisolid
      },

Semisolid 是对组件的引用，但在您使用的导航组件中，您将其用作 url 字符串。

否则，控制台日志转储可能有助于发现问题。