CODEWITHSUNDEEP
vue.jsvue-router
Otorrinolaringologista -man
Otorrinolaringologista -man

Reputation: 1137

Vue.js push.route not changing the components in App

Good day.

I am new to vue and i am trying to redirect my login page to another page whenever the user login to load another page/component. The url changes and no errors are displayed however the page does not change.

EDIT: I used Vue Tools to check out if it was redirecting and apperently it is but the form component i made still stays on screen and my someOtherComponent does show on on the screen.

Here is the code script part of my form component:

<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>

In my router file i have the following:

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,
    },
  ]

});

Here is my main.js file

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");

My someOtherPage file is just a single sentence on a h2 tag:

<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>

I followed some youtube tutorials but nothing helped in my case.

Upvotes: 0

Views: 447

Answers (1)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

In the component file under validate () method Replace this line:

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

to 

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

Upvotes: 1

Related Questions