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

Question

As we know, we can use vue-route to wrap some route paths.

<!-- vue 1.x -->
<a v-link="{name: 'route_name', params: {id: 1}}"></a>

And in vue2:

<!-- vue 2.x -->
<router-link :to="{name: 'route_name', params: {id: 1}}"></router-link>

And now, I want to display a link url for the user to copy, so I wonder if there is a way to return the absolute path url from a route object? It seemed the docs did not mention that.

For example, I want:

<template>
  <label>Copy the address</label>
  <input value="url" />
</template>

<script>
  export default {
    computed: {
      url() {
        const route = {name: 'route_name', params: {id: 1}};
        // !! The bellow shows what I may want.
        return this.$router.getLink(route);
      },
    }.
  };
</script>

Is there such a method?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

Some of the answers seemed overkill and while I couldn't find any solution out of the box I decided to just use built in functions from javascript to do it.

return window.location.origin + '/route-path?id=1';

In short window.location returns protocol, hostname and port number of current URL. Then just append the rest of the URL needed.

Answer 5

My previous answer has been deleted...

I use https://github.com/vuejs/vuex-router-sync and then in components which need path I have computed property for that. Simple, straight forward solution.

In your entry point, usually main.js you have to place:

import { sync } from 'vuex-router-sync'
import store from './vuex/store' // vuex store instance
import router from './router' // vue-router instance

sync(store, router) // done.

and then in your component which needs path you have to have, of course in <script> :

computed: {
  path () {
    return store.state.router.path
  }
}