Vue 1.x/2.x: Получить URL-адрес пути vue-router из объекта $ route

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-адрес.

Затем мы можем использовать путь для создания URL-адреса href.

Но мы также должны знать, что режим работы системы маршрутизатора, так:

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 я вычисленный свойство для этого. Простое, прямое решение.

В вашей точке входа, как правило, 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 3

В Vue 2.0, возможно, вы можете попробовать свой путь: this.$route.path может получить URL-адрес без домена. Например: http://localhost:8000/#/reg получает только /reg; часть домена вы можете легко получить за пределами VueRouter. BTW: после создания const router = new VueRouter ... вы можете получить URL-адрес, используя router.history.current.path;. Этот метод может получить URL-адрес, например, /reg.

Answer 4

Некоторые из ответов казались излишними, и, хотя я не мог найти решение из коробки, я решил просто использовать встроенные функции из javascript для этого.

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

В коротком протоколе window.location возвращает, имя хоста и номер порта текущего URL. Затем просто добавьте оставшуюся часть URL-адреса.