CODEWITHSUNDEEP
vue.jsvue-router
Ilyas Khametov
Ilyas Khametov

Reputation: 298

Vue route-link is not working for root '/' path

This is my router config:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            redirect: { name: 'auth.login' },
        },
        {
            path: '/auth/login',
            name: 'auth.login',
            component: () => import('@/pages/Auth/LoginPage.vue'),
        },
        {
            path: '/auth/registration',
            name: 'auth.registration',
            component: () => import('@/pages/Auth/RegistrationPage.vue'),
        },
    ],
});

Next, I have Logo component that acts as link to the home page:

<template>
    <div class="logo">
        <router-link :to="{ name: 'home' }" exact>Uhire</router-link>
    </div>
</template>

However, clicking on Logo component in browser doesn't do anything (nothing happens, even url string is not changed).

But if I change href from home to auth.registration everything works.

What might be a reason for such behavior?

Any help is appreciated, thanks in advance.

Upvotes: 1

Views: 1852

Answers (2)

Nikolai Syrovezhko
Nikolai Syrovezhko

Reputation: 11

Try to change the Logo component like this:

<template>
    <div class="logo">
        <a href="#" @click="navigateTo({name: 'root'})">Uhire</a>
    </div>
</template>

And add the script bellow like this:

<script>
  export default {
    methods: {
      navigateTo (route) {
        this.$router.push(route)
      }
    }
  }
</script>

Upvotes: 1

Mike
Mike

Reputation: 59

I know this is a tad old, and your problem may be different from mine, but mine resulted from a navigation guard.

In my route, I had a beforeEnter guard on the "/" path:

beforeEnter: (from, to, next) => {
  if (!userToken || !publicKey) next("/login");
},

This caused the router not to go to "/".

I then remembered the admonishment from the docs:

Make sure that the next function is called exactly once in any given pass through the navigation guard. It can appear more than once, but only if the logical paths have no overlap, otherwise the hook will never be resolved or produce errors.

Lo and behold, I modified my code (exactly as the docs recommended ... because I'm a special kind of slow) :p and it worked:

beforeEnter: (from, to, next) => {
  if (!userToken || !publicKey) next("/login");

  next();
}

Upvotes: 1

Related Questions