必须在 vue-router 上单击两次

Question

我正在尝试学习使用 vue-router。这段代码看起来很基础，但出于某种原因，在按下我的注册按钮后，它会将我带到注册屏幕，但我必须单击两次才能返回登录屏幕。任何想法为什么？在历史模式下，它显示 /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>

注册页面

<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>

Answer 1

去掉注册按钮上的href="#"，你基本上路由到/signup然后/signup#，这就是为什么你需要按两次返回才能回到登录页面。

您也可以像这样使用<router-link> 代替<a>：

<router-link class="ml-2" :to="{ name: 'SignUp' }">
    Sign Up
</router-link>

用于应用内链接，<a> 用于外部链接。