Foreword:
The content of this article does not involve the installation and configuration of plug-ins. For specific installation and configuration articles, please refer to the following directory. This article only involves the creation of Vite+Vue3+TS basic project related content. Don't talk nonsense, simply and directly.
Table of contents
npm create vite vue3练习2 -- --template vue-ts
npm i mockjs vite-plugin-mock -D
Take a look at the complete project structure first.
E:\vue3 exercise>npm create vite vue3 exercise 2 -- --template vue-ts
npm create vite 项目名 -- --template vue-ts 
Next we need to install several node modules: vue-router, axios and mock. Among them, vue-router is the routing configuration module of Vue, axios is the request package, and mock is the package for simulating the API interface on the front end.
Install vue-router and axios:
npm i vue-router axios -S
npm i mockjs vite-plugin-mock -D
Install mockjs and vite-plugin-mock. Since the main purpose of the mock in this project is only to simulate the back-end data interface, the installation is a development dependency, and it will fail if it is packaged as a production environment.
static route running
Use this command to run, the default running port of vite3 is 5173.
npm run dev
The browser opens http://localhost:5173/
Or enter localhost:5173
Configure dynamic routing
Install and configure pinia
Dynamic routing data should be managed by a public place. This article uses Vue's state manager to implement this function. pinia is a new generation of state manager for vue, basically the same as vuex, but more powerful than vuex.
npm i pinia -S 
After completing the basic configuration, you need to introduce pinia in mian.ts. It should be noted that pinia must be introduced after vue-router
If appear:
[Vue Router warn]: Record with path "/PagesOne"
is either missing a "component(s)" or "children" property.
Double check that the path is not wrong
Configure Route Guard
The idea of routing guard loading is also very simple. If our page request path is not a specified path, we will check whether our dynamic routing exists in the state manager before jumping, or whether the dynamic routing satisfies Our jump requirements, if not satisfied, request the interface and load our dynamic routing, and continue the jump operation after the loading is complete. In this project, our fixed page is the Home page, so as long as we are not jumping to the Home page, we will query whether there is a routing table in pinia, and if not, request the interface to obtain the route and load it. The code example is as follows:
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
import { useStore } from "../store";
import { GetDynamicRoutes } from '../apis'
// 静态路由表
const routes: Array<RouteRecordRaw> = [
{
// 路由重定向配置
path: '/',
redirect: '/Home'
}, {
path: '/Home',
component: () => import('../views/HomePage.vue')
}
]
// 路由对象
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
if (to.path !== '/Home' && to.path !== '/') {
const store = useStore()
if (store.routes.length < 1) {
GetDynamicRoutes().then(res => {
store.addRoutes(res.data.data, router)
next({ path: to.path, replace: true })
}).catch(_ => {
next()
})
} else {
next()
}
} else {
next()
}
})
export default routerAdd a 404 page
<template>
<h1>404</h1>
</template>/src/router/index.ts：
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
import { useStore } from "../store/index";
import { GetDynamicRoutes } from '../apis/index'
// 静态路由表
const routes: Array<RouteRecordRaw> = [
{
// 路由重定向配置
path: '/',
redirect: '/Home'
}, {
path: '/Home',
component: () => import('../views/Home.vue')
}, {
path: '/About',
component: () => import('../views/About.vue')
},
// 404页面配置
{
path: '/:catchAll(.*)',
component: () => import('../views/Error/404.vue')
}
]
// 路由对象
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
if (to.path !== '/Home' && to.path !== '/') {
const store = useStore()
if (store.routes.length < 1) {
GetDynamicRoutes().then(res => {
store.addRoutes(res.data.data, router)
next({ path: to.path, replace: true })
}).catch(_ => {
next()
})
} else {
next()
}
} else {
next()
}
})
export default router