如果未搭建开发环境，请参考vite+vue3+antd vue开发环境搭建一文。
1、编辑项目package.json文件
在dependencies项中添加依赖包，编辑后的package.json文件dependencies段内容如下：
"dependencies": {
"vue": "^3.2.37",
"vue-router": "^4.1.2"
}
2、准备两个可供路由的页面
在src文件夹下新建views\demo文件夹，然后在demo文件夹下创建page1.vue和page2.vue。
page1.vue内容如下：
<script setup>
</script>
<template>
<h1>页面1</h1>
<hr>
</template>
<style scoped>
h1 {
text-align: center;
}
</style>
page2.vue内容如下：
<script setup>
</script>
<template>
<h1>页面2</h1>
<hr>
</template>
<style scoped>
h1 {
text-align: center;
color: red;
}
</style>
3、创建路由
在src文件夹下传教router文件夹，在router文件夹中创建index.js文件，文件内容如下：
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: '/page1',
component: () => import('../views/demo/page1.vue')
},
{
path: '/page2',
component: () => import('../views/demo/page2.vue')
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
4、修改main.js文件
修改后文件内容如下：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';//添加router
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router).use(Antd).mount('#app');//添加.use(router)
5、修改App.vue文件
App.vue文件内容如下：
<script setup>
</script>
<template>
<div>
<a-space><router-link to="/page1">页面1</router-link><router-link to="/page2">页面2</router-link></a-space>
</div>
<div>
<router-view></router-view>
</div>
</template>
<style scoped>
div {
text-align: center;
}
</style>
<a-space>标签是ant-design-vue提供的组件，用于增加其中元素间的间距。
<router-link>标签时vue的路由标签，有点类似HTML的<a>标签，点击链接后浏览器页面发生切换（注意浏览器地址栏变化）。
<router-view>标签时vue-router的内容出口，也就是当vue-router发起路由切换时，对应的内容将显示在<router-view>标签中，有点类似HTML的<iframe>标签。
6、验证
打开VSCode的终端，在firstvite文件夹运行npm run dev命令，然后打开浏览器在地址栏输入http://localhost:8090（具体端口号请参考命令运行提示信息），如下图所示：
验证router结果
