unplugin-vue-router 的基本使用

1. 前言

Vue3开发过程中,每次创建新的页面都需要注册路由,需要在src/router.ts中新增页面的路径,并将URL路径映射到组件中,如下所示:

ts 复制代码
import { createMemoryHistory, createRouter } from 'vue-router'

import HomePageView from './HomePageView.vue'
import DevListView from './DevListView.vue'

const routes = [
  { path: '/', component: HomePageView },
  { path: '/DevListView', component: DevListView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

虽然看起来工作量不大,但如果页面特别多,就会感到繁琐。即使是微小的改动,如组件名的修改,也需要在路由文件中反复确认,反复如此就会感到不便。为了简化这部分工作,我想到了一个解决方案,那就是开发一个Vue3菜单路由生成工具,只需填写组件的中文名称,根据树形结构生成一个与routes结构相同的数组,然后替换使用即可。但还是觉得不够好,随后想到既然自己能发现这个问题,别人可能早已有了应对方案。接着,我就发现了 unplugin-vue-router 插件。

2. 配置

2.1 安装

ts 复制代码
npm install -D unplugin-vue-router

2.2 vite.config.ts

ts 复制代码
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
})

2.3 tsconfig.json

ts 复制代码
{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler",
    // ...
  }
}

2.4 vite-env.d.ts

ts 复制代码
/// <reference types="unplugin-vue-router/client" />

3. 应用

3.1 常规方式

因为项目布局是基于Element Plus组件库的<el-container>搭建的,其中对<e-main>进行了处理,<router-view>是 Vue Router 的一个内置组件,用于渲染匹配当前路由的组件,如下所示:

html 复制代码
<el-main>
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</el-main>

所以,DevList.vueDataList.vue组件都在<e-main>中渲染显示,常规的组件文件结构,如下所示:

ts 复制代码
src/components/
├── Login.vue
├── Register.vue
├── Container.vue
└── DevManagement
    ├── DevList.vue
    └── DataList.vue

然后,在router.ts文件中是这样的:

ts 复制代码
import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/components/Login.vue';
import Register from '@/components/Register.vue';
import Container from '@/components/Container.vue';
import DevList from '@/components/DevManagement/DevList.vue';
import DataList from '@/components/DevManagement/DataList.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/',
    name: 'Container',
    component: Container,
    children: [
      {
        path: 'DevManagement/DevList',
        name: 'DevList',
        component: DevList
      },
      {
        path: 'DevManagement/DataList',
        name: 'DataList',
        component: DataList
      }
    ]
  }
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

3.2 使用unplugin-vue-router方式

需将src/components修改为src/pages,然后把登录页Login.vue重命名为index.vue,再创建一个Container文件夹和Container.vue相对应,这样就会自动识别DevList.vueDataList.vueContainer.vue的子路由,其路由为/Container/DevManagement/DevList,如下所示:

ts 复制代码
src/pages/
├── index.vue
├── Register.vue
├── Container.vue
└── Container
    └── DevManagement
        ├── DevList.vue
        └── DataList.vue

src/router.ts文件中配置如下:

ts 复制代码
import { createRouter, createWebHashHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})

// This will update routes at runtime without reloading the page
if (import.meta.hot) { 
  handleHotUpdate(router) 
} 

如此一来,后续只需要在src/pages文件夹下按约定的规范处理即可,不需要在router.ts文件中进行修改了。

本文由博客一文多发平台 OpenWrite 发布!

相关推荐
江城开朗的豌豆8 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆20 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了20 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆25 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆26 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子35 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆40 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js