cnpm i vue-router -s

在main.js同级目录下创建router目录

并创建index.js文件如下

import { createRouter, createWebHistory} from "vue-router";
import Home from "../components/home.vue";

const routes = [
  {
    path: "/home",
    component: Home
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router;

在main文件中挂载

import router from './router'

const app=createApp(App)

app.use(router)

router 中的index.js文件中的component 开可以这样写

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

//import Home from "../components/home.vue";

const routes = [
  {
    path: "/home",
    component: () = > import('@/commponents/home.vue')

//异步写法

    component: resolve = > requier(['@/commponents/home.vue'],resolve)
  },{
    path: "/:path(.*)",
    component: () = > import('@/commponents/404.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router;

这里的 path: "/:path(.*)"这个404页面很重要，有的时候因为你没有填写这个vue3的vue-router就会出现白屏什么都不不显示的问题。而且还不报错，让你找很久都没有人给你说就是因为少这个route导致无法显示。

{
    path: "/:path(.*)",
    component: () = > import('@/commponents/404.vue')
  }

当然，App.vue 就是整个App的渲染页，所有的页面都是在这个页面中宣传出来的，素以不建议你们在这个页面中增加任何内容，如果这个页面中增加了内容，那么它会渲染到路由中的所有页面中去。