Question

这是我的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，一切正常。

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

感谢您的帮助，谢谢。

Answer 1

我知道这有点旧，你的问题可能与我的不同，但我的问题是由导航守卫造成的。

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

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

这导致路由器没有转到“/”。

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

<块引用>

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

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

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

  next();
}

Vue路由链接不适用于根“ /”路径

1 个答案: