vue-cli中使用vue-router

前言

最近开始从Nuxt跳回基础的vue-cli，进行重新学习。集成性框架的便捷性可以使项目快速搭建，但当下对底层的东西也更需要积累才是。算是日常对vue学习进度的总结跟进。适合新手向入坑小白（包括我自己hhh）。

vue-cli是官方所推的一个脚手架，它的优越性在于图形化、便捷性，更鼓励像插槽一样添加自己所需要的组件，这带来了更好的延展性。

本文记录了如何在vue-cli中使用vue-router。

步骤记录

前置条件：已经使用创建命令搭建好基础框架

vue create vue-cli-test

1. 添加vue-router

参照官方文档，使用add加入router插件（顺便说只有英文版才有vue-cli的专门说明，害）

安装前会提醒你记得commit，因为它将会覆盖掉（如果没有将会新生成）app.vue和router/index.js文件。

2. vue-router的使用

安装完成，将会自动生成Home和About两个page，同时更新App.vue，并且在router目录下生成index.js文件。默认运行效果如下：

如果要新增，可以参照官方默认方式，通过创建新的view，插入新的组件。

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

//Test.vue
<template>
    <div class="about">
        <h1>This is an test page</h1>
    </div>
</template>

//index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

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')
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "about" */ '../views/Test.vue')
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

即可实现简单的页面路由效果。