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

Question

我有两个主要页面，一个使用 login/register 表单登陆，一个使用导航栏和内容。在 login/register 之后，我被重定向到 /main。在命名路线 "nav" 中，我加载导航栏并在 "con" 中加载内容。路由器链接位于导航栏内，导航栏是单独的组件。现在当我点击其中一个链接时没有任何反应，但如果我手动输入 URL 它工作正常。我的猜测是问题是它在组件内部或其他东西中。

Link 内部导航栏组件：

<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，但没有将它添加到代码中以使其更简单

Answer 1

问题出在路由器 link (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>

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

Vue router inside component doesn't redirect

javascript

vue.js

vue-router