第一种方式（简单）

新建项目时用 vue-cli 手动选择 router 安装。

1、用键盘 ↓ 移动选择第三项 Manually select features（手动配置）；

2、选中 Babel 和 Router （按空格选中/取消）；

3、后三项选择默认也可，选择图中所示也可；

• Use history mode for router? 是否在 router 中用 history 模式？

  router 有 history 模式和 hash 模式，hash 模式下 url 里有#

  如 https://cn.vuejs.org/v2/guide/components.html#%E5%9F%BA%E6%9C%AC%E7%A4%BA%E4%BE%8B

• Where do you prefer placing config for Babel、ESLint, etc.? 把配置文件放在哪里？

• Save this as a preser for future projects? 是否保存这个配置为以后的工程配置？

4、进入项目目录，运行项目；

5、点击 Home 或者 About 可以切换页面 。

demo 项目目录如下：

第二种方式(手动)

在项目路径下安装 vue-router、手动配置文件。

用 vue-cli 新建项目，选择默认。

demo2 目录如下：

此时的 package.json 中没有依赖 vue-router：

1、进入项目路径，安装 vue-router： npm install vue-router@3.5.2

2、vue-router 安装完成后，package.json 中自动添加 vue-router 的依赖：

3、在 src 下新建 router 文件夹，在 router 文件夹中新建 index.js。配置 index.js：

//在js中引入 Vue 和 VueRouter；
import Vue from "vue";
import VueRouter from "vue-router";
//使用 VueRouter；
Vue.use(VueRouter);
//配置 router；
const routes = [];
const router = {
  routes,
  mode: "history",
};
//导出router；
export default router;

4、配置 main.js

import Vue from "vue";
import App from "./App.vue";
//添加这一行
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  //添加这一行
  router,
  render: (h) => h(App),
}).$mount("#app");

5、在 App.vue 中使用路由

<template>
  <div id="app">
    <!--这里显示路由的标题-->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <!--router-view 用来占位，在router-view中展示选择的页面内容-->
    <router-view />
  </div>
</template>

6、在项目路径下执行 npm run serve 即可运行项目。