Vue router inside component doesn't redirect

Question

I have two main pages, one is landing with login/register forms and one is with navbar and content. After login/register I get redirected to /main. There in named route "nav" I load navbar and in "con" content gets loaded. Router-links are inside navbar which is separate component. Now when I click on one of the links nothing happens, but if I enter URL manually it work fine. My guess is that problem is that this is inside a component or something.

Link inside navbar component:

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

My view

<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>

And my App.js with routes

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,
});

I have imported VueRouter, but didn't add it to the code to make it more simple

elasticman elasticman · Accepted Answer · 2018-09-17T12:19:58

The problem is the href-attribute inside the router link (b-nav-item href="#"). Omitting the href-attribute does solve the problem.

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

Vue router inside component doesn't redirect

1 Answers