vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）

回顾

上篇文章地址：vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）_konsei的博客-CSDN博客

上篇文章搭建了vue3项目，引入了ant design vue前端框架以及写了辅助开发的配置。

不好意思，最近做了许多其他事情，比较忙，所以鸽了这么久>_<，这篇文章准备将如何把vue-router引入进来，并且愉快的使用它！

git地址：https://gitee.com/konsei/vtatv

事前准备，安装pinia

vue的状态管理大家用的多大概是vuex，相比于 vuex，pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

相较于vuex，pinia减少了mutations的编写，只需要编写state、getters和actions就可以使用了，代码更加的清晰和简洁！pinia教程

安装依赖

// pinia-plugin-persist是持久化状态的插件，可以自动把需要持久化的状态保存到浏览器的localstorage里
pnpm add pinia pinia-plugin-persist

在 ./src/ 目录下新建目录store，并在该目录下新建index.ts文件，文件中引入pinia

import type { App } from 'vue';
import { createPinia } from 'pinia';
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist';

const store = createPinia();
store.use(piniaPluginPersist);

export function setupStore(app: App<Element>) {
	app.use(store);
}

// 用于组件setup以外的地方
export { store };

修改主入口文件 ./src/main.ts，将引入插件和挂载节点操作放到函数中处理

import { createApp } from 'vue';
import App from './App.vue';

import './main.css';

import { setupStore } from './store';

async function start() {
	const app = createApp(App);

    // 设置pinia
	setupStore(app);

	app.mount('#app');
}

start();

回到./src/store目录下，新建目录modules，modules目录下的每个ts文件代表一个模块的状态信息，每个文件都使用pinia的defineStore函数来创建状态管理。

该目录新建文件menu.ts，用于菜单的状态存储

/* 注意这个store在router中使用了，无法持久化 */
import { defineStore } from 'pinia';
import { store } from '/@/store';

// ts接口规范
interface MenuState {
	MenuInfo: string[]; // 菜单
}

export const useMenuStore = defineStore({
	id: 'app-menu',
	state: (): MenuState => ({
		MenuInfo: [],
	}),
	getters: {
		getMenuInfo(): string[] {
			return this.MenuInfo;
		},
	},
	actions: {
		setMenuInfo(list: string[]) {
			this.MenuInfo = list;
		},
	},
});

// 用于组件setup以外的地方
export function useMenuStoreWithOut() {
	return useMenuStore(store);
}

安装和使用vue-router

vue3中需要使用vue-router v4版本

pnpm add vue-router@4

在 ./src/ 目录下新建目录router，并在该目录下新建index.ts文件，文件中引入vue-router

import type { App } from 'vue';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const staticRoutesList: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'Root',
		redirect: '/home',
		meta: {
			title: 'Root'
		}
	}
];
// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({
	history: createWebHistory('/'), // 这里路由使用的是history模式，该模式下链接里没有#，但是需要服务端做相关配置，如果服务器端不支持配置请使用hash模式，对应函数为createWebHashHistory
	routes: staticRoutesList,
	strict: true,
	scrollBehavior: () => ({ left: 0, top: 0 })
});

// 配置路由器
export async function setupRouter(app: App<Element>) {
	app.use(router);
}

在./src/main.ts中引入vue-router

import { createApp } from 'vue';
import App from './App.vue';

import './main.css';

import { setupStore } from './store';
import { setupRouter } from './router';

async function start() {
	const app = createApp(App);

	// 设置pinia
	setupStore(app);

  // 设置vue-router
	await setupRouter(app);

	app.mount('#app');
}

start();

修改./src/App.vue，将之前的代码都去掉，使用<router-view />，这种写法一般适用于中后台管理系统，如果你准备写的系统更倾向于前台展示，请自行调整使用<router-view />的位置

<template>
	<router-view />
</template>

<script setup lang="ts"></script>

<style lang="less">
@import '/@/assets/global.less';
</style>

在./src/router目录下新建目录routes目录，该目录下新建modules目录，该目录下的每个ts文件对应一个动态路由模块，modules目录下新建主页路由home.ts

./src/router/routes/modules/home.ts

import { RouteRecordRaw } from 'vue-router';

const home: RouteRecordRaw = {
	path: '/home',
	name: 'Home',
	redirect: '/home/homePage',
	meta: {
		title: '首页',
		icon: 'ant-design:home-outlined',
		sort: 0,
		hideSubMenu: true
	},
	children: [
		{
			path: 'homePage',
			name: 'HomePage',
			component: () => import('/@/views/home/index.vue')
		}
	]
};

export default home;

回到routes目录，该目录新建RouteList.ts文件，用于配置静态路由和获取动态路由模块

./src/router/routes/RouteList.ts

import { RouteRecordRaw } from 'vue-router';

// 获取动态路由模块
export const getRouteModuleList = async () => {
	const routeModuleList: RouteRecordRaw[] = [];

	// 动态引入modules目录下的所有路由模块
	const modules = import.meta.glob('./modules/**/*.ts');

	// 加入到动态路由集合中
	for (const path in modules) {
		const modObj = await modules[path]();
		// @ts-ignore
		const mod = modObj.default || {};
		const modList = Array.isArray(mod) ? [...mod] : [mod];
		routeModuleList.push(...modList);
	}

	return routeModuleList;
};

// 静态路由列表
export const staticRoutesList: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'Root',
		redirect: '/home',
		meta: {
			title: 'Root',
		},
	},
];

回到router目录，编辑index.ts，删除写死的路由变量，从RouteList.ts中导入

./src/router/index.ts

import type { App } from 'vue';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import {
	getRouteModuleList,
	staticRoutesList
} from '/@/router/routes/RouteList';

// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({
	history: createWebHistory('/'), // 这里路由使用的是history模式，该模式下链接里没有#，但是需要服务端做相关配置，如果服务器端不支持配置请使用hash模式，对应函数为createWebHashHistory
	routes: staticRoutesList,
	strict: true,
	scrollBehavior: () => ({ left: 0, top: 0 })
});

// 配置路由器
export async function setupRouter(app: App<Element>) {
	const dynamicRoutes = await getRouteModuleList();
	// 将动态路由添加到router里
	dynamicRoutes.forEach((item: RouteRecordRaw) => {
		router.addRoute(item);
	});
	app.use(router);
}

创建路由对应的界面，在./src目录下新建目录views,该目录下信息home目录，并新建组件index.vue

./src/views/home/index.vue

<template>
	<div class="w-full h-full flex justify-center items-center font-bold text-3xl">
		Hello vtatv!
	</div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped></style>

现在启动项目，可以看到主页面上显示 Hello vtatv! 了，恭喜，已经成功在项目中使用模块化的vue-router了！

以下是用思维导图总结了一下路由的使用

 这回就到这儿吧，下一篇准备结合pinia完成根据动态路由生成菜单的功能。