Маршрутизатор Vue внутри компонента не перенаправляет - PullRequest
Новая
       7

Маршрутизатор Vue внутри компонента не перенаправляет

0 голосов
/ 17 сентября 2018

У меня есть две основные страницы, одна из которых имеет форму входа / регистрации, другая - с навигационной панелью и контентом. После входа / регистрации меня перенаправляют на / main. Там по названному маршруту "nav" я загружаю navbar, а в "con" загружается контент. Маршрутизаторы находятся внутри navbar, который является отдельным компонентом. Теперь, когда я нажимаю на одну из ссылок, ничего не происходит, но если я ввожу URL-адрес вручную, он работает нормально. Я думаю, что проблема в том, что это внутри компонента или чего-то еще.

Ссылка внутри компонента navbar: 

<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 голосов
/ 17 сентября 2018

Проблема в href-атрибуте внутри ссылки на маршрутизатор (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>
...