Vite4+Typescript+Vue3+Pinia 从零搭建(5)

项目代码同步至码云 weiz-vue3-template
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

安装 {#1-安装}

|-----------|----------------------------| | 1 | npm i vue-router@4 |

集成 {#2-集成}

1. 新建两页面进行示例 {#1-新建两页面进行示例}

在src/view下新建home.vue和login.vue，内容如下：

|---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 | <script setup lang="ts"> defineOptions({ name: 'V-home' }) </script> <template> <div>home page</div> </template> <style scoped></style> |

login.vue里修改下对应name即可

2. `src`下新建`router`文件夹 {#2-src下新建router文件夹}

index.ts作为路由入口，static.ts作为静态路由，modules内还可以放入其他类型路由，整体目录结构如下：

|---------------------|---------------------------------------------------------------------------------| | 1 2 3 4 5 6 | src | +---router | | index.ts | +---modules | | static.ts |

static.ts内容如下：

|------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 | const routes = [ { path: '/', component: () => import('@/views/home.vue') }, { path: '/login', component: () => import('@/views/login.vue') //路由懒加载 } ] export default routes |

index.ts内容如下：

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import { Router, createRouter, createWebHistory } from 'vue-router' /** 自动导入 src/router/modules 下的静态路由 * import.meta.glob使用说明：https://cn.vitejs.dev/guide/features#glob-import */ const modules: Record<string, any> = import.meta.glob(['./modules/**/*.ts'], { eager: true }) /** 初始路由 **/ const routes: any[] = [] Object.keys(modules).forEach((key) => { const module = modules[key].default if (Array.isArray(module)) { for (const item of module) { routes.push(item) } } else { routes.push(module) } }) /** * 创建路由实例 * createRouter选项有：https://router.vuejs.org/zh/api/interfaces/RouterOptions.html * hash模式使用createWebHashHistory(): https://router.vuejs.org/zh/api/#Functions-createWebHashHistory */ export const router: Router = createRouter({ history: createWebHistory(), routes, strict: true, scrollBehavior(_to, from, savedPosition) { return new Promise((resolve) => { if (savedPosition) { return savedPosition } else { if (from.meta.saveSrollTop) { const top: number = document.documentElement.scrollTop || document.body.scrollTop resolve({ left: 0, top }) } } }) } }) /** * 路由守卫 * https://router.vuejs.org/zh/guide/advanced/navigation-guards.html */ router.beforeEach((to, _from, next) => { // isAuthenticated 代表你的鉴权 const isAuthenticated = true if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) else next() }) export default router |

3. 修改`App.vue` {#3-修改App-vue}

承载路由，并增加导航

|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | <script setup lang="ts"></script> <template> <router-link to="/"> 去首页 </router-link> 丨 <router-link to="/login"> 去登录 </router-link> <router-view /> </template> <style scoped></style> |

4. 修改`main.ts` {#4-修改main-ts}

使用路由

|-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from '@/router/index' createApp(App).use(router).mount('#app') |