作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<template>
<component
:is="type === 'internal' ? 'router-link' : 'a'"
:to="type === 'internal' ? link : null"
:href="type !== 'internal' ? link : null"
>
<slot />
</component>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class SiteLink extends Vue {
@Prop({
validator: (value: string) =>
["external", "internal"].includes(value)
})
private readonly type!: string;
@Prop({ type: String })
private readonly link!: string;
}
</script>
rel
、
target
、
class
等)。
<router-link to="/about">About</router-link>
和
<a href="/about">About</a>
都将呈现为
<a href="/about">About</a>
在 DOM 中,区别在于
<router-link>
版本将为链接提供 SPA 功能(即不加载新页面,它动态呈现组件)。
type="internal"
,它将呈现
<router-link>
版本。当
type="external"
,它将呈现
<a>
版本。
<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>
Will render
<a href="https://stackoverflow.com">Stack Overflow</a>
<site-link type="internal" link="/about">About</site-link>
Will render
<router-link to="/about">About</router-link>
Which is then handle by VueRouter to render
<a href="/about">About</a>
type="internal"
,
<a>
与
否
href
在 DOM 中呈现。当
type="external"
,它按预期呈现。
<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>
Will render
<a href="https://stackoverflow.com">Stack Overflow</a>
<site-link type="internal" link="/about">About</site-link>
Will render
<router-link to="/about">About</router-link>
Which is then handle by VueRouter to render
<a>About</a> <!-- Notice there is no href -->
最佳答案
更好更清洁的方法:
<router-link v-if="type === 'internal' :to="link">
<slot />
</router-link>
<a v-else :ref="link"> <slot /> </a>
v-if
在根元素中,所以它解决了你的情况
<component
:is="type === 'internal' ? 'router-link' : 'a'"
:to="type === 'internal' ? { path: link } : null"
:href="type !== 'internal' ? link : null"
>
<slot />
</component>
关于html - 如何根据链接是外部链接还是内部链接在Vue中动态呈现<router-link>或<a>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60953094/
我是一名优秀的程序员,十分优秀!