推送到 vue-router 不會改變路由

Question

我正在嘗試使用 Typescript 而不是 JavaScript 在我的筆記本電腦上啟動並運行此示例。 它是一個示例“筆記”應用程序，展示了 Python+VUE3 的功能，包括身份驗證。 我的 GitHub 回購在這里。 最后，我取得了不錯的進展，但是，當注冊過程完成並且應該將用戶“推送”到儀表板時，我目前被困在 Register.vue 組件中。 這是“Register.vue”視圖的代碼：

<template>
    <div class="mb-3">
        <label for="username" class="form-label">Username:</label>
        <input type="text" name="username" v-model="username" class="form-control" />
    </div>
    <div class="mb-3">
        <label for="full_name" class="form-label">Full Name:</label>
        <input type="text" name="full_name" v-model="full_name" class="form-control" />
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password:</label>
        <input type="password" name="password" v-model="password" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary" @click="submit">Register</button>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { useStore } from '../store/index';
import { useRouter } from '../router/index';
import { UsersActionTypes } from '../store/modules/users/action-types';

export default defineComponent({
    name: 'Register',
    setup() {
        const store = useStore();

        const router = useRouter();

        const username = ref('');
        const full_name = ref('');
        const password = ref('');

        const submit = () => {
            console.log("start submit");
            store.dispatch(UsersActionTypes.REGISTER, {
                "username": username.value,
                "full_name": full_name.value,
                "password": password.value
            })
            .then((res) => {
                console.log("res: " + JSON.stringify(res));
                router.push('/dashboard');
            })
            //.catch((reason) => {
            //     console.log("catch error: " + JSON.stringify(reason));
            // })
            //.finally(() => {
            //     console.log("finally error");
            // });
        }

        return {
            submit,
            username,
            full_name,
            password
        };
    }
})
</script>

從控制台的調試日志來看，一切似乎都正確執行（用戶操作“注冊”調用“登錄”，調用“viewme”，提交狀態）。 我的印象是，Register 組件在調用用戶操作“REGISTER”后完全停止。

路由器 index.ts 文件如下所示：

import {
  createRouter,
  createWebHistory,
  RouteRecordRaw,
  Router
} from 'vue-router';

import { useStore } from '../store/index';

import Home from '../views/Home.vue';
import Register from '../views/Register.vue';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';
import Profile from '../views/Profile.vue';
import Note from '../views/Note.vue';
import EditNote from '../views/EditNote.vue';

const store = useStore();

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: "Home",
    component: Home
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: { requiresAuth: true },
  },
  {
    path: '/note/:id',
    name: 'Note',
    component: Note,
    meta: { requiresAuth: true }
  },
  {
    path: '/note/:id',
    name: 'EditNote',
    component: EditNote,
    meta: { requiresAuth: true }
  }
]

let router: Router;

export function useRouter() {
  if (!router) {
    router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes,
    });

    router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (store.getters.isAuthenticated) {
          next();
          return;
        }
        next('/login');
      } else {
        next();
      }
    });
  }
  return router;
}

我將我的更改推送到我的 repo 中，我希望，我不會遠離完成這個例子的道路。 預先感謝您幫助我！

Answer 1

使用路由器的正確方法是推送配置 object。 從未在文檔中注意到.push('/dashboard')的能力，並且個人永遠不會這樣做，因為以后可能對您不利。

您錯過了命名路線的目的。

對於您的/dashboard路徑，您已聲明name: 'Dashboard' ，為此，首選用法是：

router.push({ name: 'Dashboard' })

這同樣適用於導航守衛中的next ： next({ name: 'Login' })

如果您決定更改路徑，這將使您不必通過所有代碼更新每個按鈕、鏈接和路由器推送的新路徑。

除此之外，如果它仍然無法正常工作，我建議確保您已在new Vue({})中正確注冊了vue-router ，以確保確實加載了路由器配置。

我還建議在實施 3rd 方教程中的某些內容之前，通過遵循官方文檔來學習基礎知識，以避免導致這些神秘錯誤的正確用法的錯誤信息。 人們代碼中的大多數錯誤都來自類似的教程網站。 作者的代碼不一定是 100% 准確和正確的。

如果您的頁面上有一個帶有<button type="submit">的<form>標簽，並且您的頁面意外重新加載，您需要防止在執行自定義 function 的表單提交事件時發生原生表單提交，正確用法如下：

<template>

  <form @submit.prevent="submit">

    <button type="submit">Register</button>

  </form>

</template>

<script setup>

 function submit () {
   alert('I am a custom submit action.')
 }

</script>

.prevent將取消本機瀏覽器提交事件操作，因此您的自定義提交 function 會被觸發，而瀏覽器不會同時意外地重新加載頁面。