Question

美好的一天。

我是vue的新手，我试图在用户登录以加载另一个页面/组件时将我的登录页面重定向到另一个页面。网址已更改，不会显示任何错误，但是页面不会更改。

编辑：我使用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')

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

1 个答案: