vite+vue3+typesScript集成vue-router4

---

前言

上一章我们学习了vite+vue3+typesScript如何集成element-plus，这一章我学习vite+vue3+typesScript集成vue-router4。

---

集成vue-router

1. 根据官方网站说明进行安装，我们选择使用pnpm进行初始化（在项目根目录下执行命令）。

pnpm install vue-router@4

2. 在src创建views文件夹，并在该文件夹下创建home.vue和login.vue
   home.vue

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

    <h1>我是主页</h1>

</template>

login.vue

<script setup lang="ts"></script>
<template>
    <h1>我是登录页</h1>
</template>

3. 在src文件夹下创建router文件夹，并创建index.ts
   index.ts

import {createRouter,createWebHashHistory, RouteRecordRaw} from "vue-router";

  const routerList:RouteRecordRaw[]=[
    {
        //访问路径
        path:"/",
        //组件
        redirect:"/login",
        //名称
        name:"root"
       },
   {
    //访问路径
    path:"/home",
    //组件 
    component:()=>import("../views/home.vue"),
    //名称
    name:"home"
   },
   {
    //访问路径
    path:"/login",
    //组件
    component:()=>import("../views/login.vue"),
     //名称
    name:"login"
   }
  ];

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

export default router;

4. 修改main.ts

...
import router from './router';
const app=createApp(App);
//注册路由
app.use(router)

app.mount('#app')
....

5. 修改App.vue,将template标签中的内容替换成router-view标签

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

6. 我们重启pnpm run dev,在页面进行访问看看效果
   http://localhost:8336/base#/home
   
   http://localhost:8336/base#/login
   

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vite+vue3+typesScript集成vue-router4，如果需要进一步了解vue-router，可以看看这个博主对于vue-router源码解析，下一章进行集成Pinia。