linkPlugin - 链接处理

什么是 linkPlugin？

linkPlugin 是一个用于处理页面链接的插件。它提供了统一的链接处理逻辑，包括内部链接、外部链接等不同类型的链接处理，让链接管理变得更加简单和统一。

启用插件

import { createRouter, linkPlugin } from '@pro/router'

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

在路由中配置

const routes = [
  {
    path: '/external',
    children: [
      {
        path: 'iframe',
        children: [
          {
            path: 'form',
            component: {}, // 这里必须填写一个空对象或者一个空组件，否则 vue-router 无法解析
            meta: {
              link: 'https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list#list-nest.vue',
              linkMode: 'iframe', // 使用 iframe 加载页面
            },
          },
          {
            path: 'menu',
            component: () => import('@/views/system/menu/index.vue'),
            meta: {
              link: true,
              linkMode: 'iframe', // 使用 iframe 加载 menu 组件
            },
          },
        ],
      },
      {
        path: 'link',
        children: [
          {
            path: 'vite',
            component: {}, // 这里必须填写一个空对象或者一个空组件，否则 vue-router 无法解析
            meta: {
              link: 'https://vite.dev', // 使用 window.open 跳转链接
            },
          },
          {
            path: 'menu',
            component: () => import('@/views/system/menu/index.vue'),
            meta: {
              link: true, // 使用 window.open 跳转 menu 组件
            },
          },
        ],
      },
    ],
  },
]

插件配置选项

选项	类型	默认值	说明
openInNewWindow	(url: string) => void	(url) => window.open(url, '_blank')	选填，自定义在新窗口打开外链的方式

路由 Meta 配置选项

选项	类型	默认值	说明
link	string | true	-	选填，当为 string 时，需要填写链接地址，当为 true 时，将当前路由地址作为链接地址
linkMode	'newWindow' | 'iframe'	'newWindow'	选填，跳转方式，填写 'newWindow' 时会用新窗口打开链接地址，填写 'iframe' 时，会用 iframe打开链接地址