Vue route-link 不适用于根“/”路径答案

【问题标题】：Vue route-link is not working for root '/' pathVue route-link 不适用于根“/”路径
【发布时间】：2020-02-27 17:52:46
【问题描述】：

这是我的router 配置：

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

接下来，我有Logo 组件作为主页的链接：

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

但是，在浏览器中单击Logo 组件不会执行任何操作（没有任何反应，甚至 url 字符串也没有更改）。

但如果我将 href 从 home 更改为 auth.registration 一切正常。

这种行为的原因可能是什么？

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

尝试重定向到 url 重定向：'/auth/login'，看看是否可行。
@HamiltonGabriel 你的建议是我最初的 - 这不起作用

标签： vue.js vue-router

【解决方案1】：

我知道这有点老了，你的问题可能与我的不同，但我的问题是由导航守卫引起的。

在我的路线中，我在“/”路径上有一个 beforeEnter 守卫：

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

这导致路由器不去“/”。

然后我想起了文档中的警告：

确保下一个函数在任何给定的通过导航守卫。它可以出现不止一次，但仅当逻辑路径没有重叠时，否则钩子将永远不会被解决或产生错误。

瞧，我修改了我的代码（完全按照文档的建议......因为我是一种特殊的慢速）：p 并且它起作用了：

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

  next();
}

【讨论】：

【解决方案2】：

尝试像这样更改 Logo 组件：

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

然后像下面这样添加脚本：

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

【讨论】：