构建一个有路由的单页面项目有很多方式，但是使用vue-cli实现是最简单，最不容易出错的。

1 构建基本cli项目-基于vue3

终端输入命令vue create demo，demo为项目名称，选择vue3，确定，将自动创建demo文件夹，并安装依赖。
项目创建完成后的目录是：

2 使用vue添加router路由插件

创建完上一步的项目后，在demo文件夹下输入命令vue add router将自动下载安装插件，并生成

• 两个示例组件，见views下两个vue文件
• 一个路由文件，见router下的index.js
• 还会自动更新App.vue文件

更新后的目录如下：

3 运行和结构说明

Hbuilder运行到浏览器，可以看到首页，上方有两个切换文字，点击可以切换两个组件的显示。

图3-1 首页

图3-2 关于页
其实这不是两个页面，整体框架页由App.vue提供，当浏览器路径不同时，Vue的编译系统将路径对应的组件放置到App.vue的预置插槽中，即可渲染页面。

App.vue的代码框架如下：

//App.vue：
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

浏览器路径和组件的对应关系在router/index.js中体现（截取了映射关系部分代码）：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

而入口文件main.js则指明了主框架页为App.vue，并使用router/index.js的router对象作为路由配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

注意这里方法提供的参数不要写错，router指的是我们创建的路由对象，不是路由插件本身。

4 放在main.js里的路由-精简写法

将router/index.js去除，其他文件内容、位置不变，只改变main.js的写法如下，其实道理都一样，将两个文件合并了而已。

import * as Vue from 'vue'
import App from './App.vue'
import Home from './views/Home.vue'
import about from './views/About.vue'
import * as VueRouter from 'vue-router'

const routes = [{
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: about
    },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

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