（二十三）封装 router-link 组件

老怪兽

发布于 2023-02-22 18:45:11

24100

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

封装 router-link 组件

一、自定义`router-link` 样式

<template>
  <!-- 使用 custom 来告诉组件我们要开始使用自定义样式了 -->
  <router-link custom v-bind="$props" v-slot="{ navigate }">
    <button @click="navigate">
      <!-- 可以自定义内容 -->
      <slot/>
    </button>
  </router-link>
</template>

<script>
  export default {
    // 因为我们知道，当没有定义props 的值的元素会默认全部放到 根元素身上，所以这里可以这么写
    props： {
      ...RouterLink.props
    }
  }
</script>

使用封装成按钮的route-link

<ButtonLink to="/index">跳转详情页</ButtonLink>

二、判断用户是否登录，或者权限来展示路由

<template>
  <router-link v-if="!private || isLoggedIn()" v-bind="$props">
    <slot />
  </router-link>
</template>
<script>
import { RouterLink } from "vue-router";
export default {
  props: {
    ...RouterLink.props,
    private: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    isLoggedIn() {
      // 真实开发中可以判断用户是登录或者是否有权限
      // localStorage.getItem("user") !== null;
      return false;
    },
  },
};
</script>
<style scoped></style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月14日，如有侵权请联系 cloudcommunity@tencent.com 删除

route