반응형
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>
만약 당신이 반드시 "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>
반응형
'Programing' 카테고리의 다른 글
Vue/Vuetify - 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까? (0) | 2022.03.27 |
---|---|
Vue.js. v-on:change를 사용하여 b-form-select의 선택된 항목을 얻는 방법에는 아무런 도움이 되지 않는가? (0) | 2022.03.27 |
Vue2에서 디바운스를 구현하는 방법? (0) | 2022.03.27 |
Vuetify에서 리터럴 값을 사용하지 않도록 설정하는 방법 (0) | 2022.03.27 |
리액트-미들웨어 약속 처리 (0) | 2022.03.27 |