vue.js - 使用页面重新加载重定向 Vue JS 路由器

Question

我有一个带有 Login.vue 和 Home.vue 文件的应用程序。因为我将管理 HTML 网站转换为 vue 3 应用程序，所以我的 javascript 仅适用于页面重新加载。在创建应用程序时，我选择了为 SPA 添加路由器，也许我不应该这样做。到目前为止，除了我在不重新加载的情况下从登录重定向到主页时， View 都在工作。由于它没有重新加载，因此我的导航栏或任何依赖 JS 的功能将无法使用。如何通过重新加载页面从登录重定向到主页？目前，我有以下代码，但仍然无法正常工作。

this.$router.push({
      path: "/admin/home",
      reload: true
    });

Answer 1

您可以使用带空参数的 this.$router.go() 来重新加载页面。结合 this.$router.push({ path: '/admin/home' }) 你可以在不使用 vanilla JS 功能的情况下实现它。

<template>
  <button @click="redirectReload">Redirect & Reload</button>
</template>
    
<script>
  export default {  
    methods: {
      redirectReload() {
        this.$router
          .push({ path: '/expedition' })
          .then(() => { this.$router.go() })
      }
    }
  }
</script>

注意我是如何在 $router.push() 之后使用 .then 的。如果没有 then，页面重新加载的速度太快，没有时间改变路由。

作为奖励，它允许您使用 $router.push 的所有功能(例如使用像 { name: 'home' } 这样的参数。