외부 웹 사이트를 링크하는 VueJs vue-router
이것은 간단한 것일지도 모르지만, 저는 문서를 찾아봤지만 아무것도 찾을 수 없었습니다.'github' 링크를 github.com으로 리다이렉트하고 싶습니다.하지만 링크를 따라가지 않고 제 URL에 'https://github.com'을 추가하는 것 뿐입니다.다음은 스니펫입니다.
<BreadcrumbItem to='https://github.com'>
<Icon type="social-github"></Icon>
</BreadcrumbItem>
(이것은 커스텀 CSS에 iView를 사용하고 있습니다만, 「to」는 라우터 링크와 같은 방법으로 동작합니다).
최종 결과는 다음과 같습니다.
Daniel's Link를 읽고 해결 방법을 찾았습니다.
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'}
}
<a :href="'//' + websiteUrl" target="_blank">
{{ url }}
</a>
vuetify를 사용하는 경우 v-list-item, v-card 또는 v-btn을 사용할 수 있습니다.
모두 _blank로 설정할 수 있는 속성 타깃이 있습니다.예:
<v-list-item href="https://google.com" target="_blank">Google</v-list-item>
다음 중 하나를 수행할 수 있습니다.
- 표준 링크를 사용하다
<a href=... - @click 핸들러를 사용하여 변경
window.location = http://거기.
const github = { template: '<div>github</div>'}
const routes = [
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'},
component: github
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<li><router-link to="/github">github.com</router-link></li>
<router-view></router-view>
</div>
</body>필요에 따라서, 보다 다이나믹한 방법은, 특정의 방법을 덮어쓰고, 루트를 외부로부터 처리할 필요가 있는 타이밍을 검출하는 것입니다.route.meta.external:
// Override matcher to fix external links.
const match = router.matcher.match
router.matcher.match = (...args) => {
let route = match.apply(router, args)
if (!route.meta.external) {
return route
}
return Object.freeze({...route, fullPath: route.path})
}
// Override resolver to fix external links.
const resolve = router.resolve
router.resolve = (...args) => {
const resolved = resolve.apply(router, args)
if (resolved.route.meta.external) {
resolved.href = resolved.route.fullPath
}
return resolved
}
// Handle external routes.
router.beforeEach((to, from, next) => {
if (to.meta.external) {
if (to.meta.newWindow) {
window.open(to.fullPath)
}
else {
window.location.replace(to.fullPath)
}
return next(false)
}
next()
})
링크 블록을 다음과 같이 브레드 크럼 아이템 안에 넣습니다.
<BreadcrumbItem>
<a href="https://github.com">
<Icon type="social-github"/>
</a>
</BreadcrumbItem>
http 또는 https 대신 "//"를 사용합니다.라우터 파일에서는 이 방법이 유효합니다.
라우터 컨피규레이션파일에 새 루트를 만들고 새 탭에서 외부 링크에 대한 루트를 엽니다.
{
name: "Github",
beforeEnter() {
window.open('https://www.github.com/', '_blank')
},
component: MyComponent,
},
그런 다음 템플릿에 외부 링크를 사용하여 새로운 루트에 함수를 호출하는 간단한 버튼을 만듭니다.
<button @click="onUserClick('Github')">Github</button>
setup () {
const router = useRouter()
const onUserClick = (linkTo) => {
router.push({ name: linkTo })
}
return {onUserClick}
}
이를 통해 외부 루트에 대한 여러 링크를 매우 쉽게 연결할 수 있습니다.컴포넌트를 깔끔하게 정리한 IE 소셜 미디어 페이지.
언급URL : https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website
'programing' 카테고리의 다른 글
| Vue에서 특정 키워드를 가진 모든 $ref를 선택하려면 어떻게 해야 합니까? (0) | 2022.08.24 |
|---|---|
| Vuetify는 불필요한 스크롤바를 추가한다. (0) | 2022.08.24 |
| Vuetify - 양식에서 왼쪽 라벨 텍스트와 오른쪽 텍스트 필드를 수행하는 방법 (0) | 2022.08.24 |
| Vuex 및 Vuex-persistedstate를 사용한 자동 사인인 (0) | 2022.08.24 |
| GDB에서 "Single-steping to exit . . that is no line number information" 이라는 메시지가 표시되는 이유는 무엇입니까? (0) | 2022.08.24 |