Naive UI Pro

Appearance

visitedRoutesPlugin - 访问路由记录 ​

什么是 visitedRoutesPlugin？ ​

visitedRoutesPlugin 是一个用于记录用户访问过的路由的插件。它会自动跟踪用户在网站中的浏览历史，记录访问过的页面，并提供访问历史的管理功能，在我们的 Admin 中充当 Tabs 的功能。

启用插件 ​

typescript
import { createRouter, visitedRoutesPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    visitedRoutesPlugin()
  ]
})

在组件中 ​

vue
<template>
  <h3>最近访问</h3>
  <ul>
    <li v-for="route in $router.visitedRoutesPlugin.routes" :key="route.path">
      <span>{{ route.meta?.title }}</span>
    </li>
  </ul>
</template>

拦截器 ​

我们暴露了 增(add)、删(remove)、移(move) 的前置拦截钩子和后置通知钩子，这可以让你个性化控制路由记录。

1. 阻止增、删、移 ​

vue
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 阻止新增
router.visitedRoutesPlugin.guards.beforeAdd(() => {
  return false
})

// 阻止删除
router.visitedRoutesPlugin.guards.beforeRemove(() => {
  return false
})

// 阻止移动
router.visitedRoutesPlugin.guards.beforeMove(() => {
  return false
})
</script>

2. 二次修改增、删、移 ​

你可以返回一个新的数据作为最终结果值

vue
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

function delay(time: number){
  return new Promise(resolve => setTimeout(resolve,time))
}

// 修改 title
router.visitedRoutesPlugin.guards.beforeAdd(async (route) => {
  await delay(2000)
  return {
    ...route,
    meta: {
      ...(route.meta ?? {}),
      title: `${route.meta?.title} - Naive UI Pro`
    }
  }
  return false
})

// 修改要删除的索引
router.visitedRoutesPlugin.guards.beforeRemove(async (index) => {
  await delay(2000)
  return index === 0 ? 1 : index
})

// 修改移动索引
router.visitedRoutesPlugin.guards.beforeMove(async ([from, to]) => {
  await delay(2000)
  return [to - 1, from - 1]
})
</script>

3. 后置通知增、删、移 ​

vue
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

router.visitedRoutesPlugin.guards.afterAdd((route) => {
  console.log(route,'最终被加入到路由记录中的信息')
})

router.visitedRoutesPlugin.guards.afterRemove((removedIndex) => {
  console.log(removedIndex,'最终被删除的索引')
})

router.visitedRoutesPlugin.guards.afterMove(([from, to]) => {
  console.log(from, to, '最终移动的索引')
})
</script>

4. 解绑钩子 ​

每个钩子都返回一个 off 函数，你可以调用它解绑钩子使其不在被生效，以下是只生效一次的示例

vue
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const off1 = router.visitedRoutesPlugin.guards.afterAdd((route) => {
  off1()
})

const off2 = router.visitedRoutesPlugin.guards.afterRemove((removedIndex) => {
  off2() 
})

const off3 = router.visitedRoutesPlugin.guards.afterMove(([from, to]) => {
  off3()
})

const off4 = outer.visitedRoutesPlugin.guards.beforeAdd((route) => {
  off4()
  return route
})

const off5 = router.visitedRoutesPlugin.guards.beforeRemove((index) => {
  off5()
  return index
})

const off6 = router.visitedRoutesPlugin.guards.beforeMove(([from, to]) => {
  off6()
  return [from, to]
})
</script>

插件对外导出 ​

以下选项可通过 $router.xx、useRouter().xx 访问。

选项类型默认值说明
visitedRoutesPlugin.routes详见 Admin[]访问过的路由记录
visitedRoutesPlugin.activeIndex详见 Admin-1当前激活的路由索引
visitedRoutesPlugin.add详见 Admin-添加路由，添加成功返回 true，否则返回 false
visitedRoutesPlugin.remove详见 Admin-移除指定索引的路由，移除成功返回 true，否则返回 false
visitedRoutesPlugin.removes详见 Admin-移除指定索引范围的路由，包含起始索引，不包含结束索引
visitedRoutesPlugin.move详见 Admin-移动指定索引的路由到另一个位置，移动成功返回 true，否则返回 false
visitedRoutesPlugin.guards.beforeAdd详见案例-在添加路由之前执行，返回 false 阻止添加，可返回一个新的路由
visitedRoutesPlugin.guards.afterAdd详见案例-在添加路由之后执行
visitedRoutesPlugin.guards.beforeRemove详见案例-在移除路由之前执行，返回 false 阻止删除，可返回一个新的索引
visitedRoutesPlugin.guards.afterRemove详见案例-在移除路由之后执行
visitedRoutesPlugin.guards.beforeMove详见案例-在移动路由之前执行，返回 false 阻止移动，可返回新的起始位置和结束位置
visitedRoutesPlugin.guards.afterMove详见案例-在移动路由之后执行