Vue 1.x/2.x：从 $route 对象获取 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>

而现在，我想显示一个linkurl供用户复制，所以想知道有没有办法return绝对路径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

我之前的回答被删除了...

我使用 https://github.com/vuejs/vuex-router-sync，然后在需要 path 的组件中，我为此计算了属性。简单直接的解决方案。

在您的入口点，通常 main.js 您必须放置：

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 的组件中，你当然必须在 <script>:

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

Answer 2

下面是 Vue#1.0 的解决方案：

传递路由对象，如：

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

方法：vm.$router.stringifyPath returns 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;
    }
  }
};

现在我们可以自由分享 link 到其他地方。

Answer 3

在Vue 2.0中也许你可以试试我的方法：this.$route.path可以得到没有域的URL路径。例如：http://localhost:8000/#/reg只得到/reg部分；您可以在 VueRouter 之外轻松获取域部分。顺便说一句：创建 const router = new VueRouter ... 后，您可以使用 router.history.current.path; 获得 URL。这种方法也可以像/reg一样得到URL。

Answer 4

对于未来希望这样做的人

我相信这是 Vue 2.x 方式

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

那么如果你想要完整的 url 你会做

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

Vue 1.x/2.x：从 $route 对象获取 vue-router 路径 url

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

mvvm

ecmascript-6

vue.js

vue-router

vuejs2