Может ли vue-router открыть ссылку в новой вкладке?

У меня есть сводная страница и подробная страница. Все маршруты реализованы с помощью vue-router (v 0.7.x) с использованием программной навигации, например:

this.$router.go({ path: "/link/to/page" })

Однако, когда я перехожу со страницы сводки на подстраницу, мне нужно открыть подстраницу на новой вкладке, как это было бы, добавив _target="blank" к тегу <a>.

Есть ли способ сделать это?

Ответ 1

Я думаю, что вы можете сделать что-то вроде этого:

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

это сработало для меня. спасибо.

Ответ 2

Похоже, что теперь это возможно в более новых версиях (Vue Router 3.0.1):

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

Ответ 3

Для тех, кто интересуется ответом, нет. См. Соответствующий issue в github.

В: Можно ли открывать ссылку vue-router в новой вкладке progammaticaly

A: Нет. используйте обычную ссылку.

Ответ 4

Если вы определяете свой маршрут, как тот, который задан в вопросе (путь: '/link/to/page'):

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/link/to/page',
      component: MyComponent
    }
  ]
})

Вы можете разрешить URL-адрес на странице сводки и открыть свою подстраницу, как показано ниже:

<script>
export default {
  methods: {
    popup() {
      let route = this.$router.resolve({path: '/link/to/page'});
      // let route = this.$router.resolve('/link/to/page'); // This also works.
      window.open(route.href, '_blank');
    }
  }
};
</script>

Конечно, если вы дали своему маршруту имя, вы можете разрешить URL по имени:

routes: [
  {
    path: '/link/to/page',
    component: MyComponent,
    name: 'subPage'
  }
]

...

let route = this.$router.resolve({name: 'subPage'});

Ссылки:

vue-router router.resolve (местоположение, текущий?, добавить?)
vue-router router-link

Ответ 5

Где-то в вашем проекте, как правило, main.js или router.js

import Router from 'vue-router'

Router.prototype.open = function (routeObject) {
  const {href} = this.resolve(routeObject)
  window.open(href, '_blank')
}

В вашем компоненте:

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>

Ответ 6

Я думаю, что лучший способ - это просто использовать:

window.open("yourURL", '_blank');

🚀 * улетает *

Ответ 7

Просто напишите этот код в своем файле маршрутизации:

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}