回顾

上篇文章地址：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);// 设置piniasetupStore(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模式，对应函数为createWebHashHistoryroutes: 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);// 设置piniasetupStore(app);// 设置vue-routerawait 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-ignoreconst 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模式，对应函数为createWebHashHistoryroutes: 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完成根据动态路由生成菜单的功能。

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

VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
Ant Design Vue - 环境搭建（Windows）
前言官方文档:https://www.antdv.com/docs/vue/introduce-cn/ 首先,您要自己搭建一个 vue 环境,我这里通过 cli 创建一个项目,如下图所示: 一.安装 ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
[Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范和组件化编码规范 3.它适用于企业级的中后台搭建二.快速创建项目 1.安装脚手架 npm ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...

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

回顾

事前准备，安装pinia

安装和使用vue-router

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

最新文章

热门文章