我已经设置了一个带有下拉菜单的导航抽屉，现在我不知道如何声明/编写，因此当我单击导航中的名称时，它将重定向我到我希望将其重定向到的路线。如何声明？
这是我在商店中的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
[HERE是我尝试设置导航栏并试图弄清楚如何声明路由的方法（顺便说一句，路由工作正常，但是我不知道如何在链接中声明它们。）：
<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，也许这不是最好的方法，但是请帮助我解决这个问题！我不会让它工作，甚至我会努力尝试..：（
/丽莎
我认为您的vuex文件中可能有问题，例如：
{
title: "Semi solid guitars",
open: false,
path: Semisolid
},
[Semisolid是对组件的引用，但是在您使用的导航组件中，您将其用作url字符串。
否则，控制台日志转储可能有助于发现问题。