使用vue create demo2创建一个新的项目，这个项目我们选择手动配置，勾选路由的选项，可以创建一个带路由的模板项目。

这里演示不使用脚手架而是自己加入路由包给一个原始项目配置路由的方式：

vue create demo3 这里选择vue3默认配置创建项目，这个项目本身时没有路由的。

删除掉app.vue中多余代码，显示一个空白的页面：

App.vue:

<template>   <div>        </div> </template>
<script>
export default {   name: 'App',   components: {   } } </script>
<style> </style> 删除component文件夹下的HelloWorld组件。 然后开始正式配置路由： （1）npm install vue-router@4.0.0安装路由包 （2）src目录下新建一个views文件夹，用来存放每个路由的大组件 （3）views文件夹下新建两个文件Home.vue和About.vue Home.vue: <template>   <div>       这是Home页面   </div> </template>
<script> export default {
} </script>
<style>
</style> About.vue: <template>   <div>       这是About页面   </div> </template>
<script> export default {
} </script>
<style>
</style> （4）src文件夹下新建一个router文件夹，然后在router文件夹下新建一个index.js index.js: import { createRouter, createWebHistory } from 'vue-router'//引入vue-router包中的createRouter和createWebHistory  import Home from '../views/Home.vue' import About from '../views/About.vue'
const routes = [//配置路由的地址和对应的组件   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     component:About   } ]
const router = createRouter({//创建路由   history: createWebHistory(process.env.BASE_URL),//配置路由的模式为history模式，可以返回之前浏览的页面   routes//上面配置的路由规则 })
export default router//导出配置的路由 （5）main.js中使用上面配置的路由： main.js: import { createApp } from 'vue' import App from './App.vue' import router from './router'
createApp(App).use(router).mount('#app') （6）App.vue中配置路由跳转的链接： App.vue: <template>   <div >     <router-link to="/">Home</router-link> |   //router-link是路由包中定义的组件，本质上是一个a标签     <router-link to="/about">About</router-link>   </div>   <router-view/>//表示路由的页面内容显示的位置 </template>
<style>
</style>   （7）页面效果