时间戳

首页 > 解决方案 > 如何使路由器链接与自定义链接组件一起使用？

javascript - 如何使路由器链接与自定义链接组件一起使用？

问题描述

<base-link>零件

我有一个 Vue 组件<base-link>，每次我想拥有一个主播时都会使用它。它主要用于应用特定于链接的样式，以便整个页面上的所有链接看起来都一样，而无需应用全局样式。

<router-link>利用_<base-link>

使用组件创建链接时，除非使用我的组件创建锚元素，否则<router-link>我无法应用这些样式（<base-link>样式是范围内的） 。<router-link><base-link>

幸运的是<router-link>提供了tag属性，这似乎正是这样做的。不幸的是，我无法让它工作。我有两个问题：

  1. 我所有的组件都是在本地注册的（我使用带有 Webpack 的 ES6 模块并在每次需要时在本地导入组件）。<router-link>不知道<base-link>组件是什么并且无法渲染它。有没有办法注入本地组件以<router-link>供使用？

  2. 为了解决问题 #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>
  `
});

标签： javascriptvue.jsvue-componentvue-router

解决方案

您可以创建一个基本链接组件，它可以兼作普通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组件的说明：

  • 我们使用componentvuejs 提供的 a 来渲染a标签或router-link基于routerLink道具的真实性。
  • .base如果是普通链接，则添加一个类，即a

  • 我们绑定$attrs，它允许我们使组件更加透明，即允许我们使用属性，例如href或to不将它们作为道具传递。

    <base-link href="https://google.com">go to google</base-link>

您可以在这里查看有关使用的更多说明$attrs

推荐阅读