Vue 1.x/2.x：$ルートオブジェクトからvue-routerパスのURLを取得する

Question

ご存じのように、vue-routeを使用していくつかのルートパスをラップすることができます。

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

そしてvue2中：

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

そして今、私はコピーするユーザのためにリンクのURLを表示したいので、から絶対パスのURLを返す方法があるかどうか、私は疑問に思いますルートオブジェクト？ドキュメントには言及していないようでした。

例えば、私がしたい：

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

は、このような方法はありますか？

Answer 1

ですVue＃1.0ソリューション：

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

方法：vm.$router.stringifyPathはURLパスを返します。

次に、パスを使用してhrefのURLを生成することができます。

は、しかし、我々はまた、そう、ルータのシステムモードが何であるかを知っておく必要があります。

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; 
    } 
    } 
}; 

は、今、私たちはどこか別の場所へのリンクを共有するのは自由です。

Answer 2

私の前の回答が削除されました...

私はhttps://github.com/vuejs/vuex-router-syncし、そのためのpath私が計算したプロパティを必要とする部品に使用します。シンプルでストレートなソリューション。 <script>で当然の

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. 

をしてからpathを必要とするコンポーネントにあなたが持っている必要があり、：あなたのエントリポイントで

、通常main.jsあなたは配置する必要があります

以下

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

Answer 3

おそらく私の方法を試すことができます：this.$route.pathは、ドメインなしのURLパスを取得できます。たとえば、http://localhost:8000/#/regは/reg部分のみを取得します。あなたはVueRouterの外で簡単にそれを得ることができるドメイン部分。 BTW：const router = new VueRouter ...を作成した後、router.history.current.path;を使用してURLを取得できます。このメソッドは/regのようなURLも取得できます。

Answer 4

答えの中には残酷に思えるものがありましたが、私は箱から何も解決策を見つけることができませんでしたが、javascriptの組み込み関数を使用することにしました。短いwindow.location戻りプロトコル、ホスト名と現在のURLのポート番号で

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

。次に、必要なURLの残りの部分を追加します。