[英]Custom Vue library component with <router-link>, how to synchronize router state?
[英]How to make router-link work with custom link component?
<base-link>
组件我有一个 Vue 组件<base-link>
,每次我想要一个 achor 时都会使用它。 它主要用于应用特定于链接的样式,以便整个页面上的所有链接看起来都一样,而无需应用全局样式。
<router-link>
使用<base-link>
使用<router-link>
组件创建链接时,除非<router-link>
使用我的<base-link>
组件创建锚元素,否则我无法应用这些样式( <base-link>
样式是作用域的)。
幸运的是<router-link>
提供了tag
属性,这似乎正是这样做的。 不幸的是,我无法让它工作。 我有两个问题:
我所有的组件都是在本地注册的(我使用带有 Webpack 的 ES6 模块并在每次需要时在本地导入组件)。 <router-link>
不知道<base-link>
组件是什么并且无法渲染它。 有没有办法注入一个本地组件供<router-link>
使用?
为了解决问题 #1,我认为全局声明<base-link>
组件就足够了。 不幸的是,它仍然不起作用。 这次<base-link>
组件被正确渲染,但仍然无法正常工作 - 不会对点击事件做出反应。 在我看来,问题在于它的href
属性根本没有设置。 有没有办法让<router-link>
正确设置它? (无需手动设置)
如何解决问题 #1 和 #2? 我怀疑#1 可能是不可能的,但我希望至少#2 是。
这是一支带有下面代码的笔,它说明了这两个问题。
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
道具,如下所示:
<base-link>This is a base a tag</base-link>
要将其用作router-link
,只需添加router-link
道具和to
道具:
<base-link router-link to="/">This is router-link</base-link>
关于base-link组件的说明:
我们使用 vuejs 提供a
component
根据routerLink
属性的真实性来渲染标签或router-link
。
如果是普通链接,则添加.base
类, a
我们绑定$attrs
,它允许我们使组件更加透明,即允许我们使用href
或to
等属性,而无需将它们作为 props 传递。
<base-link href="https://google.com">go to google</base-link>
您可以在这里查看有关$attrs
用法的更多说明
这是为了解决问题 #2
全局组件不继承路由器链接的事件监听器。 您可以通过将v-on="$listeners"
添加到全局组件来使其继承。
// Globally registered BaseLink.
Vue.component('BaseLinkGlobal', {
props: {
href: String
},
template: `
<a
:href="href"
class="BaseLinkGlobal"
v-on="$listeners"
>
<slot />
</a>
`
})
添加后链接有效: https ://codepen.io/jacobgoh101/pen/YvqJxL?editors=0010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.