web-dev-qa-db-ja.com

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

ご存じのとおり、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>

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

mvvmecmascript-6vue.jsvuejs2vue-router
10
Alfred Huang

以下は、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;
    }
  }
};

これで、他の場所へのリンクを自由に共有できます。

0
Alfred Huang

これをしたい将来の人々のために

これはVue 2.xの方法だと思います

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

次に、完全なURLが必要な場合は、

var fullUrl = window.location.Origin + "/" + path
23
Dan

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

3
xxxx

答えの一部はやり過ぎに思えたため、最初から解決策を見つけることができませんでしたが、JavaScriptの組み込み関数を使用してそれを実行することにしました。

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

要するに window.location は、現在のURLのプロトコル、ホスト名、ポート番号を返します。次に、必要な残りのURLを追加します。

0
goodies4uall