Javascript options.js:1未捕获（承诺中）导航复制：避免在导航到登录组件时对当前位置进行冗余导航

我现在正在编写Google Chrome插件，但当我使用vue router（

“vue router”）“^3.4.9”

）来导航登录组件时，显示以下错误：

options.js:1 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/login".
    at re (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:250566)
    at e.fe.confirmTransition (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:253462)
    at e.fe.transitionTo (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:252830)
    at e.push (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:257154)
    at chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:260550
    at new Promise (<anonymous>)
    at ke.push (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:260514)
    at s.handleSelect (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:263617)
    at qt (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:12842)
    at s.n (chrome-extension://kodlfoajiamencmhlfehfkbadoajillc/options.js:1:14583)

然后在

index.js

文件中导入

Login

组件，如下所示：

const routes = [
    { path: '/', redirect: '/setting' },
    { path: '/setting', component: Setting },
    { path: '/about', component: About },
    { path: '/login', component: Login },
];
const router = new VueRouter({
    routes,
});

new Vue({
    render: (h) => h(App),
    router,
}).$mount('#app');

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Setting from './views/Setting.vue';
import About from './views/About.vue';
import Login from './views/Login.vue';

<template>
    <div class="login">
        <div class="title">登录</div>
        <div class="setting-name">用户名：</div>
        <div class="setting-input">
            <el-input @change="saveConfig" placeholder="请输入你的用户名"></el-input>
        </div>
        <div class="setting-name">密码：</div>
        <div class="setting-input">
            <el-input @change="saveConfig" placeholder="请输入你的密码"></el-input>
        </div>
        <div class="setting-input">
            <el-button size="medium" @click="toHotkey">登录</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data: () => ({
    }),
}
</script>

并定义如下

Login

组件：

const routes = [
    { path: '/', redirect: '/setting' },
    { path: '/setting', component: Setting },
    { path: '/about', component: About },
    { path: '/login', component: Login },
];
const router = new VueRouter({
    routes,
});

new Vue({
    render: (h) => h(App),
    router,
}).$mount('#app');

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Setting from './views/Setting.vue';
import About from './views/About.vue';
import Login from './views/Login.vue';

<template>
    <div class="login">
        <div class="title">登录</div>
        <div class="setting-name">用户名：</div>
        <div class="setting-input">
            <el-input @change="saveConfig" placeholder="请输入你的用户名"></el-input>
        </div>
        <div class="setting-name">密码：</div>
        <div class="setting-input">
            <el-input @change="saveConfig" placeholder="请输入你的密码"></el-input>
        </div>
        <div class="setting-input">
            <el-button size="medium" @click="toHotkey">登录</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data: () => ({
    }),
}
</script>

错误消失了，但我无法导航到登录组件。我应该怎么做才能使它按预期工作