VueJS with vue-router how to redirect to a server route

Question

I am trying to redirect a user clicking logout link to the server rendered logout page. But as it stands with code below I just get redirected to the default path.

I have a server route set-up in flask as the following:

@app.route('/logout')
def logout():
    logout_user()
    return render_template('login.html')

In vue I want to redirect the route so that I am directed to the server route.

<template>
<a v-on:click="logout">Logout</a>
</template>
<script>
  export default {
    name: SomePage.vue
  },
  methods: {
    logout () {
      this.$router.replace('/logout')
      // I also tried .go('/logout')
    }
  }
 </script>

Then do I need to set up a route in my router?

export default new Router {
  routes: {
     {
     path: '/'
     component: Default
     children: [
       {
       path: '/logout'
       // no component added here - is it needed?
       }
     ]
  }
}

As I have already redirected to /logout, I am not sure how adding a component for this route would help as I just want to go to the base /logout and get the .html page returned by the server. Any ideas?

Davod Aslani Fakor · Accepted Answer · 2017-05-17 05:34:06Z

20

I have some problem and find solution ... try this in vuejs 2 +

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

edited May 17, 2017 at 5:34

answered May 14, 2017 at 12:03

Davod Aslani Fakor

6816 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toby Over a year ago

Please edit this post to provide an explanation and/or some additional context as to why this solution works.

drew kroft Over a year ago

@Toby, According to the Vue docs "For consistency with the HTML5 History API, router.go is now only used for back/forward navigation, while router.push is used to navigate to a specific page." vuejs.org/v2/guide/migration-vue-router.html Hope this is helpful.

Decade Moon · Accepted Answer · 2017-04-01 07:03:18Z

13

Manipulating the window location via $router methods doesn't cause the browser to perform a full page reload, which is what you want in this case. You'll need to set the window location manually:

window.location.replace('/logout')

answered Apr 1, 2017 at 7:03

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Collectives™ on Stack Overflow

VueJS with vue-router how to redirect to a server route

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related