Vue.js push.route 不会更改 App 中的组件

Question

美好的一天。

我是 vue 新手，每当用户登录以加载另一个页面/组件时，我都会尝试将我的登录页面重定向到另一个页面。 url 改变了，没有错误显示，但是页面没有改变。

编辑：我使用 Vue 工具检查它是否正在重定向，并且显然是，但我制作的表单组件仍然停留在屏幕上，并且我的 someOtherComponent 确实显示在屏幕上。

这是我的表单组件的代码脚本部分：

<script>
  export default {

    data: () => ({
      valid: true,
      name: '',
      userRules: [
        v => !!v || 'Name is required',
      ],
      password: '',
      passwordRules: [
        v => (v && v.length <= 10) || 'Password must be less than 10 characters'
      ],
    }),

    methods: {
      validate () {
        if (this.name == "User" && this.password == '99999' && this.$refs.form.validate()) {
          console.log(this.name, this.password)
          this.$router.push('someOtherPage')
        }
      },
    }
  }
</script>

在我的路由器文件中，我有以下内容：

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import SomeOtherPage from "./pages/someOtherPage";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/someOtherPage",
      name: "SomeOtherPage",
      component: SomeOtherPage,
    },
  ]

});

这是我的 main.js 文件

import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

我的 someOtherPage 文件只是一个 h2 标签上的一句话：

<template>
  <v-app>
    <v-content>
      <div>
        <h3>This is some other page</h3>
      </div>
    </v-content>
  </v-app>
</template>

<script>

export default {
  name: 'someOtherPage',
  data () {
    return {
      //
    }
  }
}
</script>

<style scoped>

</style>

我遵循了一些 youtube 教程，但对我的情况没有任何帮助。

Answer 1

在validate ()方法下的组件文件中替换这一行：

'this.$router.push('someOtherPage')' 

到

this.$router.push('/someOtherPage')