<base-link>
组件
我有一个 Vue 组件 <base-link>
,每次我想要一个 anchor 时我都会使用它。它主要用于应用特定于链接的样式,以便在不应用全局样式的情况下整个页面上的所有链接看起来都一样。
制作<router-link>
使用 <base-link>
使用 <router-link>
时组件来创建链接,我不能应用这些样式(<base-link>
样式是有范围的)除非<router-link>
使用我的 <base-link>
组件来创建 anchor 元素。
幸运的是<router-link>
提供 tag
attribute ,这似乎正是这样做的。不幸的是我无法让它工作。我有两个问题:
我的所有组件都在本地注册(我将 ES6 模块与 Webpack 一起使用,并在每次需要时在本地导入组件)。
<router-link>
不知道什么<base-link>
组件是并且不能呈现它。有没有办法为<router-link>
注入(inject)本地组件?使用?为了解决问题 #1,我认为声明
<base-link>
就足够了全局组件。不幸的是它仍然不起作用。这次<base-link>
组件已正确呈现,但仍无法正常工作 - 对点击事件没有反应。在我看来问题是它是href
根本没有设置属性。有没有办法制作<router-link>
设置正确吗? (无需手动设置)
问题
如何解决问题 #1 和 #2?我怀疑 #1 可能是不可能的,但我希望至少 #2 是不可能的。
代码示例
Here是一支带有下面代码的笔,它说明了这两个问题。
const router = new VueRouter({
routes: [
{
path: "/",
component: {
template: '<p>Homepage template</p>'
}
},
{
path: "/subpage",
component: {
template: '<p>Subpage template</p>'
}
}
]
});
// Globally registered BaseLink.
Vue.component('BaseLinkGlobal', {
props: {
href: String
},
template: `
<a
:href="href"
class="BaseLinkGlobal"
>
<slot />
</a>
`
})
const vue = new Vue({
el: "#app",
router,
components: {
// Locally registered BaseLink.
BaseLinkLocal: {
props: {
href: String
},
template: `
<a
:href="href"
class="BaseLinkLocal"
>
<slot />
</a>
`
}
},
template: `
<div>
<!-- 2 router links. One uses locally registered BaseLink
-- and the other one a globally registered one. -->
<nav>
<router-link
to="/"
tag="base-link-local"
>
Home
</router-link>
<router-link
to="/subpage"
tag="base-link-global"
>
Subpage
</router-link>
</nav>
<router-view />
</div>
`
});
最佳答案
您可以创建一个基本链接组件,它可以兼作普通 a
标签或 <router-link>
当你想要的时候。
//Base link
<template>
<component :is="type" :class="{'base': type === 'a'}" v-bind="$attrs">
<slot></slot>
</component>
</template>
<script>
export default {
props: {
routerLink: {
type: Boolean,
default: false
}
},
computed: {
type() {
return this.routerLink ? 'router-link' : 'a'
}
}
}
</script>
<style scopex>
.base {
border: 1px solid red;
}
</style>
用法
当您想将其用作普通链接时,请不要提供 router-link
Prop 如下:
<base-link>This is a base a tag</base-link>
将其用作 router-link
只需添加 router-link
与 to
一起使用 Prop :
<base-link router-link to="/">This is router-link</base-link>
base-link组件说明:
我们使用
component
由vuejs提供渲染a
标签或router-link
基于routerLink
的真实性 Prop 。一类
.base
如果它是一个普通链接即被添加,即a
我们绑定(bind)
$attrs
这允许我们使组件更加透明,即允许我们使用像href
这样的属性或to
不将它们作为 Prop 传递。<base-link href="https://google.com">go to google</base-link>
可以看看here有关 $attrs
用法的更多解释
关于javascript - 如何使 router-link 与自定义链接组件一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50699291/