核心：vue3如何通过router路由修改默认首页;如何vue2升级到vue3
**【创作背景故事】**之前好长一段时间研究了vue2的东西，后面在用vant3写移动端的过程中总发现控制台报错，后面才发现是版本不支持的问题，这才想到了去升级版本，很多时候就是这样，你不去改变终究还是会被淘汰的，这篇文章主要是对那些相对来说基础的vue学者来定制的，下面就直接进入主题：
1、安装
首先基于安装过node的环境，由于我的vue版本太低了直接被淘汰了，所以重新整了一个高版本的来做项目测试：

卸载与安装最新版本的过程如上所示
npm uninstall vue-cli -g
cnpm install -g @vue/cli

安装成功后的效果；
2、创建项目
找一个你要安装的路径，然后执行下面命令，命名可以按照你自己的想法
vue create vant-bfm-app

3、引入路由
先安装路由组件
npm install vue-router --save

创建路由文件，在src下创建router文件，并在下面创建一个index.js
将下面的文件复制到index.js

//1.index.js里引入router模块
import { createRouter, createWebHashHistory } from "vue-router";

//引入这两个组件  写的两个.vue组件  

//这里最容易出错，报错结果看一下报错的路径和你的项目对不对得上，还有是否有home。vue这个vue后缀。
const home = import("../components/home.vue")
const login = import("../components/login.vue")

// 这种写法是一样的
// import home from "../components/home.vue";


//2.定义路由  定义的时候，要在src的components下建两个vue组件，像上边一样
const routes = [
  { path: "/", component: home },//3000接口直接进入home.所有组件都可以这么写，不用写name
  {
    path: "/login",
    name: "login",
    component: login
  },
]
//3.创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
})
//4.导出路由----去main.js导入
export default router

4、新增vue文件
在src\components创建一个首页home.vue和登录页login.vue面如下所示:
自己随意在里面写个东西：

5、【重点来了】将main.js和router的js文件映射应用起来
如果我们启动会发现还是访问app.vue的内容

但是我想默认首页不是这个怎么办呢？
这个时候我们去修改原有的main.js文件，将路由关联起来。如下所示：
将默认的

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

修改成：

import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

然后再重启一下serve就可以看到明显得效果，如下图所示：

各位看官喜欢博主的文章的可以给个关注哈，想要demo的可以留下您的邮箱，可以的话顺手给个关注哈！将持续为您创作！！！
岁聿如月，有你才叫完整！