组件内部的Vue路由器不重定向答案

【问题标题】：Vue router inside component doesn't redirect组件内部的Vue路由器不重定向
【发布时间】：2019-02-21 07:17:05
【问题描述】：

我有两个主要页面，一个是登录/注册表单，一个是导航栏和内容。登录/注册后，我被重定向到 /main。在命名路线“nav”中，我加载导航栏并在“con”中加载内容。路由器链接位于导航栏内，导航栏是单独的组件。现在，当我单击其中一个链接时，什么也没有发生，但是如果我手动输入 URL，它就可以正常工作。我的猜测是，问题在于它在组件或其他东西内部。

导航栏组件内的链接：

<router-link :to="{ name: 'forum' }">
    <b-nav-item href="#" ><i class="material-icons md-36">forum</i> Forum</b-nav-item>
</router-link>

我的看法

<div id="app">
    @csrf
    <router-view></router-view>
    <router-view class="view one" name="nav"></router-view>
    <router-view class="view two" name="con"></router-view>
</div>

还有我的带路由的 App.js

import Landing from './components/LandingPage.vue'
import Home from './components/HomePage.vue'
import Navbar from './components/Navbar.vue'
import Forum from './components/Forum.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Landing,
            meta: {
                requiresVisitor: true,
            }
        },
        {
            path: '/main',
            name: 'main',
            components: {
                nav: Navbar,
                con: Home
              },
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/forum',
            name: 'forum',
            components: {
                nav: Navbar,
                con: Forum
              },
            meta: {
                requiresAuth: true,
            }
        }
    ],
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.getters.loggedIn) {
        next({
          name: 'home',
        })
      } else {
        next()
      }
    } else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (store.getters.loggedIn) {
        next({
          name: 'main',
        })
      } else {
        next()
      }
    } else {
      next()
    }
  })


const app = new Vue({
    el: '#app',
    components: { Home, Landing, Navbar, Forum },
    router,
    store,
});

我已经导入了VueRouter，但是没有把它添加到代码中让它更简单

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

问题在于路由器链接 (b-nav-item href="#") 内的 href-attribute。省略 href 属性确实可以解决问题。

<router-link :to="{ name: 'forum' }">
    <b-nav-item><i class="material-icons md-36">forum</i> Forum</b-nav-item>
</router-link>

【讨论】：