Vue.js push.route не меняет компоненты в приложении - PullRequest
Новая
       5

Vue.js push.route не меняет компоненты в приложении

0 голосов
/ 21 мая 2019

Добрый день.

Я новичок в vue и пытаюсь перенаправить свою страницу входа на другую страницу всякий раз, когда пользователь входит в систему, чтобы загрузить другую страницу / компонент. URL-адрес изменяется, и ошибки не отображаются, однако страница не изменяется.

РЕДАКТИРОВАТЬ: я использовал Vue Tools, чтобы проверить, перенаправляет ли он, и, по-видимому, это так, но созданный мною компонент формы все еще остается на экране, а мой 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, но в моем случае ничего не помогло.

1 Ответ

1 голос
/ 21 мая 2019

В файле компонента в методе validate () Замените эту строку: 

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

до 

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