Vuetify v-btn 및 Vue 라우터를 사용하여 새 창에서 링크 열기

Vuetify v-btn 및 Vue 라우터를 사용하여 새 창에서 링크 열기

Vue Router의 최근 버전에서는 새 탭에서 링크를 열 수 있음(예: 다음)

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

정확하게 렌더링하다<a target="_blank">.

그러나 뷔에티파(Vuetify)와 같은 것은 통하지 않는 것 같다.v-btn예를 들어, 아이콘을 사용하려는 경우 라우터 경로를 지원한다.

<v-btn icon :to="{ name: 'fooRoute'}" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

구성 요소 렌더링에도 불구하고<a>거기에는 없다target="_blank"기여하다어떻게 하면 이 일을 해낼 수 있을까?

다음 코드 조각 시도

<v-btn icon href="/fooRoute" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

Vuetify 버튼 API

만약 당신이 반드시 "http"로 시작하는 모든 것에 일치하는 Vue 기본 경로를 사용하여 ":to" 바인딩을 사용해야 한다면 가능한 해결책이 있다.이 규칙을 내부 경로 후 마지막 규칙으로 추가하지만 404 경로 이후는 추가하지 마십시오(이 규칙과 일치하는 항목 *).

{
// This is a hack to use :to tag for absolute paths.
path: "/http*",
beforeEnter: to => {
  window.open(to.fullPath.substring(1), '_blank');
}

그런 다음 구성 요소에서 태그를 추가하여 값을 사용하십시오.예를 들면 다음과 같다.내 프로젝트에서 다음 개체에서 "route" 값을 사용한다.

 {
    title: "Help",
    detail: "Get online help and documentation.",
    icon: "mdi-help",
    color: "success darken-2",
    route: "https://www.confluence.myorg.com"
  }

그렇게

<v-btn :color="l.color" text :to="l.route">

a를 열려면new tab또는 aexternal link, 사용하다href대신에 귀속시키다to, 예를 들어,

<v-btn
    href="https://letesend.com/"
    target="_blank"
    icon
>
    <v-icon>window</v-icon> Link Text
</v-btn>

참조URL: https://stackoverflow.com/questions/49654527/open-link-in-new-window-with-vuetify-v-btn-and-vue-router