# lh-pt-vue-admin

**Repository Path**: lh-prototype/lh-pt-vue-admin

## Basic Information

- **Project Name**: lh-pt-vue-admin
- **Description**: lh-pt-vue-admin是一个基于Vue的后台管理系统原型项目，专注于提供高效、灵活的前端解决方案，适用于快速开发企业级应用。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-26
- **Last Updated**: 2025-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## lh-pt-vue-admin

lh-pt-vue-admin是一个基于Vue的后台管理系统原型项目，专注于提供高效、灵活的前端解决方案，适用于快速开发企业级应用。

## 开始使用

安装依赖

```
npm i
```

运行

```
npm run dev
```

## 关键实现

### 如何实现刷新页签

1 路由表配置

```js
const publicRoutes = [
  {
    path: '/redirect',
    component: Layout,
    children: [
      {
        name: 'Redirect',
        path: '/redirect/:path(.*)',
        component: () => import('@/views/base/redirect.vue'),
      },
    ],
  },
  ......
];
```

2 刷新方法

跳转到 Redirect 页面，路径参数带上当前页面的 fullPath。

```js
/**
 * 页签刷新功能
 *
 * @param {number} index tag数组索引
 */
refreshPage(index) {
  const tagView = this.tagsViewList[index];
  this.addExcludePage(tagView.name);
  router.replace({
    path: '/redirect' + tagView.fullPath,
  });
},
```

3 Redirect 组件中实现页面替换

```vue
<template>
  <div></div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const { params, query } = route;
const { path } = params;

router.replace({ path: '/' + path, query });
</script>
```



### 如何实现404

路由表配置：

在最后配置一个路径参数，匹配任意 url 重定向到 404 页面。

```js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 该值在vite中配置
  routes: [...publicRoutes, { path: '/:pathMatch(.*)*', redirect: '/404' }],
});
```



### 如何自定义图标组件

1 引入 iconify 插件

```bash
npm install --save-dev @iconify/vue
```

2 封装组件

- 引入 Icon 组件
- 传入 icon 属性，是图标的名称。图标名称在对于图标库中找到，例如 element 的图标：https://icon-sets.iconify.design/ep/ 。

```vue
<template>
  <Icon v-if="name.includes(':')" class="common-icon" :icon="name" />
</template>

<script setup>
import { Icon } from '@iconify/vue';
defineProps({
  name: {
    type: String,
    required: true,
  },
});
</script>
```