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

这是我的索引.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 的更多信息，请参阅文档。