第1步. 安装vue-router：

npm install vue-router -D

安装成功后package.json中会增加一项开发时依赖：

"devDependencies": {

"@vitejs/plugin-vue": "^3.1.2",

"vite": "^3.1.6",

"vue-router": "^4.1.5"

}

第2步. 在/modules目录中创建router.js，其内容如下：

import {createRouter, createWebHistory} from "vue-router";

const router = createRouter({

routes: [

{

name: 'Home',

path: '/home',

component: () => import('../views/Home.vue')

},

{

name: 'About',

path: '/about',

component: () => import('../views/About.vue')

}

],

history: createWebHistory()

})

export default router

第3步. 在main.js中导入router：

import router from "../modules/router";

createApp(App).use(router).mount('#app')

第4步. 在views目录中创建单组件文件Home.vue和About.vue，内容如下：

Home.vue

<template>

<h1>这里是首页</h1>

</template>

<script>

export default {

name: "Home"

}

</script>

<style scoped>

</style>

About.vue

<template>

<h1>这里是关于页面</h1>

</template>

<script>

export default {

name: "About"

}

</script>

<style scoped>

</style>

第5步. 在App.vue中使用router-link 与router-view标签。router-link 对应 html 中的a 标签，router-view 相当于router-link的承载页面，用于展示router-link 的的内容。代码如下：

<template>

<router-link to="Home">首页</router-link> |

<router-link to="About">关于</router-link>

<router-view />

</template>

第6步. 运行项目，测试路由组件的渲染效果。