Vue.js 必须在vue路由器上单击“上一步”两次

我正在努力学习使用vue路由器。这段代码看起来非常基本，但出于某种原因，在按下我的注册按钮后，它会将我带到注册屏幕，但我必须单击后退两次才能返回登录屏幕。你知道为什么吗？在历史记录模式下，它会显示/signup#，当我单击后退时，我会看到/signup，然后在第二次单击后，我也会得到/要返回的正确url

路由器设置

import store from '@/store/store'
import Router from 'vue-router'
import LabelPage from '@/components/LabelPage.vue'
import LoginPage from '@/components/LoginPage.vue'
import SignupPage from '@/components/SignupPage.vue';

function AuthGuard(to: string,from: string,next: Function) {

}

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Login',
            component: LoginPage
        },
        {
            path: '/label',
            name: 'Label',
            component: LabelPage
        },
        {
            path: '/signup',
            name: 'SignUp',
            component: SignupPage
        }
    ]
})

登录页面

<template>
<div class="full-page flexbox-container">
    <div class="card offset-3 col-6">
        <form class="card-body login-form" @submit="onSubmit">
            <div class="d-flex justify-content-center">
                <h1 class="h3 mb-3 font-weight-normal text-center">Sign In</h1>
            </div>
            <div class="d-flex justify-content-center">
                <GoogleSignInButton @success="onGoogleSignIn"/>
            </div>
            <div class="d-flex justify-content-center">
                <input ref="emailInput" type="email" class="form-control" placeholder="Email Address" required autofocus autocomplete="username">
            </div>
            <div class="d-flex justify-content-center">
                <input ref="passwordInput" type="password" class="form-control" placeholder="Password" required autocomplete="current-password">
            </div>
            <div class="d-flex justify-content-center">
                <button @click="onSubmit" class="btn btn-success btn-block mt-4" type="submit"><i class="fas fa-sign-in-alt"></i> Sign in</button>
            </div>
            <div class="d-flex justify-content-end">
                <div>Need an Account?</div><a @click="onSignUp" class="ml-2" href="#">Sign Up</a>
            </div>
        </form>
    </div>
</div>
</template>

<script lang="ts">
import backend from '@/services/backend'
import store, { IAuth } from '../store/store'
import { Component, Vue } from 'vue-property-decorator'
import GoogleSignInButton from '@/components/social-buttons/GoogleSignInButton.vue'
import IGoogleUser from '@/interfaces/google';

@Component({
    components: {
        GoogleSignInButton
    }
})
class LoginPage extends Vue {
    async onSubmit(e: Event){
        e.preventDefault();
        let username = (this.$refs.emailInput as HTMLInputElement).value;
        let password = (this.$refs.passwordInput as HTMLInputElement).value;

        if(username && password)
        {
            let response = await backend.authenticate(username,password);
            console.log(await backend.test());
        }
    }

    onSignUp() {
        this.$router.push('signup');
    }

    async onGoogleSignIn(googleUser: IGoogleUser) {
        //Should trigger an overlay or something that locks the screen here.
        try
        {
            let response = await backend.authenticateGoogleSignIn(googleUser);
            this.$router.push({ path: 'label' });
        }
        catch(ex)
        {
            console.error(ex);
            //Display the error to the user in some way
        }
    }
}

export default LoginPage;
</script>

<style scoped>
.login-form > * {
    margin: 10px !important;
}
</style>

登录
登录
需要账户吗？
从“@/services/backend”导入后端
从“../store/store”导入存储，{IAuth}
从“Vue属性装饰器”导入{Component，Vue}
从“@/components/social buttons/GoogleSignInButton.vue”导入GoogleSignInButton
从“@/interfaces/google”导入IGoogleUser；
@组成部分({
组成部分：{
谷歌登录按钮
}
})
类LoginPage扩展了Vue{
异步onSubmit（e:Event）{
e、 预防默认值（）；
让username=（this.$refs.emailInput作为HTMLInputElement）.value；
让password=（this.$refs.passwordInput作为HTMLInputElement）.value；
如果（用户名和密码）
{
let response=wait backend.authenticate（用户名、密码）；
log（wait backend.test（））；
}
}
onSignUp（）{
这是。$router.push（'signup'）；
}
异步onGoogleSignIn（谷歌用户：IGoogleUser）{
//应该触发一个覆盖或锁定屏幕的东西。
尝试
{
let response=wait backend.authenticateGoogleSignIn（谷歌用户）；
这是.$router.push（{path:'label'}）；
}
捕获（ex）
{
控制台错误（ex）；
//以某种方式向用户显示错误
}
}
}
导出默认登录页面；
.登录表单>*{
利润率：10px！重要；
}

注册页

<template>
<div class="full-page flexbox-container">
    <div class="card offset-3 col-6">
        <form class="card-body login-form" @submit="onSubmit">
            <div class="d-flex justify-content-center">
                <input ref="firstName" type="text" class="form-control" placeholder="First Name" required autofocus autocomplete="given-name">
            </div>
            <div class="d-flex justify-content-center">
                <input ref="lastName" type="text" class="form-control" placeholder="First Name" required autofocus autocomplete="family-name">
            </div>
            <div class="d-flex justify-content-center">
                <input ref="emailInput" type="email" class="form-control" placeholder="Email Address" required autofocus autocomplete="username">
            </div>
            <div class="d-flex justify-content-center">
                <input ref="passwordInput" type="password" class="form-control" placeholder="Password" required autocomplete="new-password">
            </div>
            <div class="d-flex justify-content-center">
                <input ref="passwordVerifyInput" type="password" class="form-control" placeholder="Verify Password" required autocomplete="new-password">
            </div>
        </form>
    </div>
</div>
</template>

<script lang="ts">
import backend from '@/services/backend'
import store, { IAuth } from '../store/store'
import { Component, Vue } from 'vue-property-decorator';

@Component
class SignupPage extends Vue {
  onSubmit(e: Event) {

  } 
}

export default SignupPage;
</script>

<style scoped>
.login-form > * {
    margin: 10px !important;
}
</style>

从“@/services/backend”导入后端
从“../store/store”导入存储，{IAuth}
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
类SignupPage扩展了Vue{
onSubmit（e:事件）{
} 
}
导出默认签名；
.登录表单>*{
利润率：10px！重要；
}

删除注册按钮上的

href=“#”

，基本上你会被路由到

/signup

，然后

/signup#

，这就是为什么你需要按两下返回登录页面的原因

您也可以使用

代替

，如下所示：

注册

它用于应用程序内链接，而

用于外部链接