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?

Solution 1

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

Solution 2

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

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

Comments

[Toby]

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

[drew kroft]

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