Vue 1.x/2.x: Get vue-router path url from a $route object

For future people looking to do this

I believe this is the Vue 2.x way

var path = this.$router.resolve({name: 'SomePath', params: {id: 1}}).href

then if you want the full url you would do

var fullUrl = window.location.origin + "/" + path

In Vue 2.0 maybe you can try my way: this.$route.path can get the URL path without domain. For example: http://localhost:8000/#/reg only gets the /reg part; the domain part you can get it easily outside the VueRouter. BTW: after creating const router = new VueRouter ..., you can get the URL by using router.history.current.path;. This method can get the URL like /reg too.

Below is the Vue#1.0 solution:

Passing a route object like:

const route = {name: 'route_name', params: {...}, query: {...}}

to the method: vm.$router.stringifyPath returns the url path.

Then we can use the path to generate an href url.

But we also need to know what the router system mode is, so:

export default {  methods: {    getUrlFromRoute(route) {      const vm = this;      let path = vm.$router.stringifyPath(route);      if (vm.$router.mode === 'hash') {        if (vm.$router.history.hashbang) {          path = '!' + path;        }        path = '#' + path;      }      // finally we add the absolute prefix before that      if (path[0] === '#') {        // hash mode join        path = location.origin + location.pathname              + (location.query||'') + path;      } else if(path[0] === '/') {        // absolute path        path = location.origin + path;      } else {        // relative path        path = location.origin + location.pathname.replace(/\/[^\/]+$/, '/') + path;      }      return path;    }  }};

Now we are free to share the link to somewhere else.