vue-router一级/二级路由基础小白配置

在搭建完基本页面后 (vite 搭建 :npm create vite@latest)
（npm i 安装依赖）
先下载依赖 vue-router (npm i vue-router)
在src 文件下
- App.vue //主要渲染
- main.js //主要配置
- router/index.js //配置路由
- components //存放组件(暂时为空，后续需要放入单页面应用，易于管理)
- Home //存放页面的主文件
- Home.vue //存放子路由
- Home1.vue //子路由1
- Home2.vue //子路由2
- About
- About.vue

第一步 ：配置main

import {
    createVue } from "vue"  //引入vue中的创建实例方法
import App from "./App.vue"    //引入实例主App
import router from "./router"   //引入路由配置(需要第二步先创建路由文件index.js)

createApp(App)  //创建实例
	.use(router)   //为vue添加全局功能
	.mount("#app")   // 创建的App实例挂载到id为"app"中

第二步：配置router

import {
    createRouter, createWebHistory } from "vue-router"  //引入创建路由，路由历史模式