必須在 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# ，這就是為什么您需要按兩次 go 返回登錄頁面。

你也可以像這樣使用<router-link>而不是<a> ：

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

用於應用內鏈接，而<a>用於外部鏈接。