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

标签 mvvm ecmascript-6 vue.js vuejs2 vue-router

正如我们所知,我们可以使用 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>

有这样的方法吗?

最佳答案

对于 future 希望这样做的人

我相信这是 Vue 2.x 的方式

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

然后如果你想要完整的 url 你会这样做

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

关于mvvm - Vue 1.x/2.x : Get vue-router path url from a $route object,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41036009/

相关文章:

c# - 更新 ViewModel 属性时如何避免递归?

wpf - 如何禁用 WPF 对话框确定按钮以响应自定义 ValidationRule 类确定的无效输入?

c# - 当按下按钮或按键时,如何在AvalonDock中从一个选项卡转到另一个选项卡?

json - 如何通过 es6 语法使用 chai json 模式

vue.js - Vue - 重用方法的最佳方式

windows-phone-7 - MVVM 数据服务和跨 View 模型持久化数据

javascript - react | TypeScript - "this"onClick 事件的上下文

node.js - 调试 es6 代理作为属性 -> 内部错误 : illegal access

javascript - 在 VueJs 中向非父组件发送数据

javascript - 插件完成ajax调用后将vue绑定(bind)到根元素