Transition between views

Viewed 33

I am a beginner in Vue (a few hours) and I have trouble switching to the next view after pressing the button.

login: function () - In strict mode code, functions can only be declared at top level or inside a block. (10: 9)

Can anyone tell me why this is happening?

Login.vue

  <template>
  <div>
    <button v-on:click="login">
    </button>
  </div>
</template>

<script>
methods: {
  login: function () {
      this.$router.push('/home')
  }
}
</script>

rouetr.js

    import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue';
import Login from '@/components/Login.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
];

const router = new VueRouter({
    routes,
});

export default router;
2 Answers

I think that it's a linter error, try to declare your function like this:

<script>
methods: {
  login () {
      this.$router.push('/home')
  }
}
</script>

I chcange this and it wokrs

    <script>
export default  {
  name:"App",
  methods: {
    next() {
      this.$router.push({ name: 'Home' })
      console.log(this)
    }
  }
}
</script>
Related