Vue-router có thể mở liên kết trong tab mới không?

Tôi có một trang tóm tắt và một trang con chi tiết. Tất cả các tuyến đường được triển khai với vue-router(v 0.7.x) bằng cách sử dụng điều hướng có lập trình như sau:

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

Tuy nhiên, khi tôi định tuyến từ trang tóm tắt đến trang con, tôi cần mở trang con trong một tab mới giống như cách mở trang đó bằng cách thêm _target="blank"vào <a>thẻ.

Có cách nào để làm việc này không?

Tôi nghĩ rằng bạn có thể làm điều gì đó như sau:

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

nó đã làm việc cho tôi. cảm ơn.

Có vẻ như điều này hiện có thể thực hiện được trong các phiên bản mới hơn (Vue Router 3.0.1):

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

Đối với những người đang tự hỏi câu trả lời là không. Xem vấn đề liên quan trên github.

Q: Có thể mở liên kết vue-router trong tab mới progammaticaly không

A: Không. Sử dụng một liên kết bình thường.

Trong trường hợp bạn xác định tuyến đường của mình giống như tuyến đường được hỏi trong câu hỏi (đường dẫn: '/ 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
    }
  ]
})

Bạn có thể giải quyết URL trong trang tóm tắt của mình và mở trang phụ của bạn như sau:

<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>

Tất nhiên nếu bạn đã đặt tên cho tuyến đường của mình, bạn có thể phân giải URL theo tên:

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

...

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

Người giới thiệu:

• vue-router router.resolve (vị trí, hiện tại ?, thêm vào?)
• vue-router router-link

Ở đâu đó trong dự án của bạn, thường là main.js hoặc router.js

import Router from 'vue-router'

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

Trong thành phần của bạn:

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

Tôi nghĩ cách tốt nhất là sử dụng đơn giản:

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

🚀 * bay đi *

Chỉ cần viết mã này trong tệp định tuyến của bạn:

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

Điều này đã làm việc cho tôi-

let routeData = this.$router.resolve(
{
  path: '/resources/c-m-communities', 
  query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');

Tôi đã sửa đổi câu trả lời @Rafael_Andrs_Cspedes_Basterio

Nếu bạn chỉ quan tâm về đường dẫn tương đối như: /dashboard, /aboutvv, Xem câu trả lời khác.

Nếu bạn muốn mở một đường dẫn tuyệt đối như: https://www.google.comđến một tab mới, bạn phải biết rằng Vue Router KHÔNG dùng để xử lý chúng.

Tuy nhiên, họ dường như coi đó là một yêu cầu tính năng. # 1280 . Nhưng cho đến khi họ làm điều đó,

Đây là một mẹo nhỏ bạn có thể làm để xử lý các liên kết bên ngoài với vue-router.

• Đi tới cấu hình bộ định tuyến (có thể là router.js) và thêm mã này:

/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
  const link = document.createElement('a')
  link.href = url
  link.target = newTab ? '_blank' : ''
  if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
  link.click()
}

Bây giờ, bất cứ khi nào chúng tôi xử lý các URL tuyệt đối, chúng tôi đều có giải pháp. Ví dụ để mở google đến một tab mới

this.$router.absUrl('https://www.google.com)

Hãy nhớ rằng bất cứ khi nào chúng ta mở một trang khác đến một tab mới, chúng ta PHẢI sử dụng noopener noreferrer.

Đọc thêm tại đây

hoặc Đây

Điều này phù hợp với tôi:

Trong mẫu HTML: <a target="_blank" :href="url" @click.stop>your_name</a>

Trong mount (): this.url = `${window.location.origin}/your_page_name`;

Cách đơn giản nhất để thực hiện việc này bằng cách sử dụng thẻ liên kết sẽ là:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>