从零开始搭建vue3项目（三）项目集成vue-router

前言

目前，我们自己创建的项目里是没有引入vue-router的，本节来引入vue-router，然后简单配置两个静态路由页面，看看效果。

安装依赖

在项目的根目录打开终端，输入以下命令安装依赖：
npm install vue-router
安装成功后，在package.json文件里能看到vue-router的版本信息

配置vue-router

1. 为了便于维护，一般把类似vue-router这种，一个功能模块的代码放在一个文件夹里进行管理。在src下新建文件夹router，然后在该文件夹下创建index.js文件作为vue-router的出口。
   
2. 接着需要在index.js里创建路由对象，配置路由信息，这里简单加两个页面做演示。
   页面一般放在src下的文件夹下，我习惯命名为views，然后在views目录下创建两个文件夹login和home，再分别创建index.vue，表示每个模块的出口文件，创建后的目录结构如下所示
   
3. 有了上面创建的两个页面，就可以配置路由对象了，router目录下的index.js按以下代码进行配置：

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

const router = createRouter({
  history: createWebHashHistory(), // 有history 和 hash两种模式   
  routes: [
    {
      name: 'home',
      path: '/',
      component: () => import('@/views/home/index.vue')
    },
    {
      name: 'login',
      path: '/login',
      component: () => import('@/views/login/index.vue')
    }
  ]
})
export default router

4. 这里使用动态加载组件的方式，比起把所有组件放在文件头部全部引入进来，性能好一些，然后这里还用到了路径别名“@”，这个我们目前还没配置，要在vue.config.js文件里进行配置，在defineConfig里添加configureWebpack选项，configureWebpack是配置webpack的选项，里面有很多配置项。我还是采取增量开发理念，用到哪个加哪个。

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: () => {
    return {
      // resolve 用于配置模块解析规则，有extensions，alias，modules这三个配置选项
      resolve: {
        // alias用来配置路径别名
        alias: {
          "@": path.resolve(__dirname, "src")
        }
      }
    }
  }
})

注意：vue.config.js文件是项目构建时才读取，因此，每次修改里面的内容，就需要重启一下项目。
5. 前面我们创建了vue-router的配置文件，还添加了对应的页面，接下来需要把该路由添加到vue实例里面。src目录下有个main.js文件，该文件默认为项目的入口文件，vue实例也是在这里创建的，一般在这里将vue-router添加到vue实例里。修改main.js文件为

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

import router from './router/index.js'
// 创建vue实例
const app = createApp(App)
// 注入router
app.use(router)
app.mount('#app')

6. 最后还需要有个地方展示当前路由对象匹配的页面，一般是放在App.vue里面，使用<router-view/>占位进行展示
   
7. 至此，一个简单的路由就配置完成了，重启项目，分别访问 / 和 /login 就能看到路由正常导航到对应的页面。
   
   
   公司项目一般用动态路由，等后面做完axios和node后台服务之后，再加吧！

欲知后事如何，请看下集