返回 导航

Vue.js

hangge.com

Vue.js - RouterLink和RouterView路由组件插槽使用详解（作用域插槽slot）

作者：hangge | 2026-09-03 08:47

一、<router-link> 组件的作用域插槽

1，基本介绍

（1）<router-link> 组件通过一个作用域插槽暴露底层的定制能力。
  • 在 vue-router 3.x 中，<router-link> 有一个 tag 属性，可以决定 <router-link> 到底渲染什么元素。
  • 但是从 vue-router 4.x 开始，该属性被移除了，却提供更具灵活性的 v-slot 的方式，用于定制渲染的内容。

（2）v-slot 的使用主要分为两个步骤：
  • 添加 custom 属性，表示整个元素要自定义。如果不添加该属性，那么自定义的内容被包裹在一个 <a> 元素中。 
  • 使用 v-slot 作用域插槽获取内部传递的值，具体如下。 
    • href：解析后的 URL。 
    • route：解析后规范化的 route 对象。 
    • navigate：触发导航的函数。 
    • isActive：匹配状态。 
    • isExactActive：精准匹配状态。 

2，使用样例

（1）修改 /src/App.vue 组件代码，使用 <router-link> 组件的作用域插槽自定义“首页”按钮。具体操作如下：
  • 在 <router-link> 组件上添加 custom 属性（表示整个元素要自定义）和 v-slot 指令。该指令通过 props 接收插槽内部提供的参数，例如 props.navigate、props.href 和 props.isActive 等。 
  • 向 <router-link> 组件的默认插槽中插入 <strong> 和两个 <span> 元素。
    • 为 <strong> 元素的 click 事件绑定作用域插槽提供的 navigate 函数。当单击“首页”按钮时，会触发导航函数进行页面跳转。
    • 为两个 <span> 元素分别绑定作用域插槽提供的 href 和 isActive 值， 这里仅作为显示使用。 
<template>
  <div id="app">
    <nav>
      <router-link to="/home" v-slot="props" custom>
        <strong @click="props.navigate">首页：</strong>
        <span>{{ props.href }}</span>
        <span> - {{ props.isActive }} </span>
        <!-- 还支持自定义组件 -->
      </router-link>|
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

（2）运行后的效果如下：

二、<router-view> 组件的 v-slot 

1，基本介绍

<router-view> 组件也提供了一个 v-slot，可以使用 <transition> 和 <keep-alive> 组件包裹路由组件。

2，使用样例

（1）下面代码使用 <router-view> 作用域插槽为页面添加过渡动画功能，具体如下：
  • 在 <router-view> 组件上添加 v-slot 指令，通过 props 接收内部提供的插槽参数。 
  • 在 <router-view> 组件的默认插槽中插入 <transition> 组件。<transition> 组件用于组件添加过渡动画，指定的过渡动画类名为 hangge，并在 style 标签中编写相应的动画样式着，将插槽提供的 props.Component 属性动态绑定到 <component> 组件的 is 属性上。 
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view v-slot="props">
      <transition name="hangge">
        <component :is="props.Component"></component>
      </transition>
    </router-view>
  </div>
</template>
<style>
.hangge-enter-from,
.hangge-leave-to {
  opacity: 0;
}

.hangge-enter-active,
.hangge-leave-active {
  transition: opacity 1s ease;
}
</style>

（2）除了添加过渡效果，还可以使用 <keep-alive> 组件为页面添加缓存功能，代码如下： 
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view v-slot="props">
      <keep-alive>
        <component :is="props.Component"></component>
      </keep-alive>
    </router-view>
  </div>
</template>
评论

全部评论（0）

回到顶部