vue-router가 새 탭에서 링크를 열 수 있습니까?

요약 페이지와 세부 하위 페이지가 있습니다. 모든 경로는 vue-router다음과 같은 프로그래밍 방식 탐색을 사용하여 (v 0.7.x) 로 구현됩니다 .

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

그러나 요약 페이지에서 하위 페이지로 라우팅 할 때 태그 를 추가 _target="blank"하는 것처럼 새 탭에서 하위 페이지를 열어야합니다 <a>.

이를 수행하는 방법이 있습니까?

나는 당신이 다음과 같이 할 수 있다고 생각합니다.

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

그것은 나를 위해 일했습니다. 감사.

이제 최신 버전 (Vue Router 3.0.1)에서 이것이 가능한 것 같습니다.

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

궁금한 사람들에게 대답은 '아니오'입니다. github에서 관련 문제 를 참조하십시오 .

Q : 새 탭 progammaticaly에서 열린 링크를 볼 수 있습니다.

A : 아니요. 일반 링크를 사용하십시오.

질문에서 묻는 것과 같이 경로를 정의하는 경우 (경로 : '/ 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 (location, current ?, append?)
• vue-router 라우터 링크

프로젝트 어딘가 (일반적으로 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>

가장 좋은 방법은 다음을 사용하는 것입니다.

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

🚀 * 멀리 날아 *

라우팅 파일에 다음 코드를 작성하십시오.

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

이것은 나를 위해 일했습니다.

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

@Rafael_Andrs_Cspedes_Basterio 답변을 수정했습니다.

/dashboard, /about등과 같은 상대 경로에만 관심이 있다면 다른 답변을 참조하십시오.

https://www.google.com새 탭에 대한 절대 경로를 열려면 Vue Router가이를 처리 할 수 ​​없다는 것을 알아야합니다.

그러나 그들은 그것을 기능 요청으로 간주하는 것 같습니다. # 1280 . 하지만 그들이 그렇게 할 때까지

다음은 vue-router로 외부 링크를 처리하기 위해 할 수있는 약간의 트릭입니다.

• 라우터 구성 (아마도 router.js)으로 이동하여 다음 코드를 추가합니다.

/* 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()
}

이제 절대 URL을 다룰 때마다 해결책이 있습니다. 예를 들어 Google을 새 탭으로 열려면

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

새 탭에 대한 다른 페이지를 열 때마다 반드시을 사용해야 noopener noreferrer합니다.

여기에서 더 많은 것을 읽으십시오

또는 여기

이것은 나를 위해 작동합니다.

HTML 템플릿에서 : <a target="_blank" :href="url" @click.stop>your_name</a>

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

앵커 태그를 사용하여이를 수행하는 가장 간단한 방법은 다음과 같습니다.

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