vue-router-better-view

Enhances the RouterView & KeepAlive functionality of Vue Router.

中文文档

Online example

Background

The current RouterView component in Vue Router has the following limitations when used with the KeepAlive component:

1. Unable to cache different parameters of the same component instance based on dynamic route matching.
2. Route components must have distinct name attributes; otherwise, components with the same name will cause caching issues.

This plugin provides a simple and efficient solution to the above problems.

Installation

npm i vue-router-better-view

Global Registration

import { BetterRouterView } from 'vue-router-better-view'

// Globally register the BetterRouterView component
app.use(BetterRouterView)

Local Registration

<!-- layout.vue -->
<script
  setup
  lang="ts"
>
  import { BetterRouterView } from 'vue-router-better-view'
</script>

<template>
  <main>
    <better-router-view />
  </main>
</template>

Component Props

export interface BetterRouterViewProps extends RouterViewProps {
  /**
   * Retrieves the view component key for the current route.
   * If not set or returns a falsy value, behaves like the standard `RouterView` component.
   * @param route The current route
   * @returns The view component key
   */
  resolveViewKey?: ResolveViewKey
}

Example

<script
  setup
  lang="ts"
>
  import { BetterRouterView, type ResolveViewKey } from 'vue-router-better-view'

  const resolveViewKey: ResolveViewKey = (route) => {
    // If route.meta.singleton is true, use the route's path as the view component key
    if (route.meta.singleton) {
      return route.path
    }

    // Use the route's fullPath as the view component key
    return route.fullPath
  }
</script>

<template>
  <main>
    <better-router-view
      v-slot="{ Component }"
      :resolve-view-key="resolveViewKey"
    >
      <!-- include/exclude can be used based on the return value of resolveViewKey -->
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </better-router-view>
  </main>
</template>

Template Refs

<script setup lang="ts">
+import { ref } from 'vue'

+const mainContent = ref<any>()
+const resolveMainContent = () => {
+  // Prefer using the inner property to get the reference of the original component;
+  // if it doesn't exist, fall back to mainContent.value.
+  return mainContent.value?.inner || mainContent.value
+}
</script>

<template>
-        <component :is="Component" />
+        <component :is="Component" ref="mainContent" />
</template>