Breaking News: Grepper is joining You.com. Read the official announcement!

router-link custom

Gifted Gibbon answered on January 27, 2023 Popularity 2/10 Helpfulness 3/10

answer router-link custom

router-link custom

Comment

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
    <slot />
  </a>
  <router-link
    v-else
    v-bind="$props"
    custom
    v-slot="{ isActive, href, navigate }"
  >
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      :class="isActive ? activeClass : inactiveClass"
    >
      <slot />
    </a>
  </router-link>
</template>

<script>
import { RouterLink } from 'vue-router'

export default {
  name: 'AppLink',
  inheritAttrs: false,

  props: {
    // add @ts-ignore if using TypeScript
    ...RouterLink.props,
    inactiveClass: String,
  },

  computed: {
    isExternalLink() {
      return typeof this.to === 'string' && this.to.startsWith('http')
    },
  },
}
</script>

Popularity 2/10 Helpfulness 3/10 Language whatever

Source: router.vuejs.org

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Jan 27 2023

Gifted Gibbon

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

router-link custom

Contents

More Related Answers

router-link custom

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.