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?

Answer 1

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

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

Answer 2

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