首页 文章

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

提问于
浏览
0

我有两个主要页面,一个是登录/注册表单登陆,另一个是导航栏和内容 . 登录/注册后,我被重定向到/ main . 在命名路由“nav”我加载导航栏并在“con”内容加载 . 路由器链接位于navbar内部,这是独立的组件 . 现在,当我点击其中一个链接时没有任何反应,但如果我手动输入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,但没有将它添加到代码中以使其更简单

1 回答

  • 0

    问题是路由器链接中的 href-attribute (b-nav-item href = "#") . 省略href属性确实解决了问题 .

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

相关问题