npm install vue-router@4 //不确定名字

import { createRouter, createWebHistory } from 'vue-router'

export const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('./views/index.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('./views/test.vue'),
    // children: [
    //   {
    //     path: 'view/:id',
    //     name: "diart_view",
    //     component: () => import('./view/diary_view.vue')
    //   }
    // ]
  },
  // {
  //   path: '/bold',
  //   component: () => import('./views/bold.vue')
  // },
  {
    path: '/default',
    component: () => import('./views/default.vue')
  },
  {
    path: '/draw',
    component: () => import('./views/drawing.vue')
  },
  {
    path: '/notebook',
    component: () => import('./views/notebook.vue')
  },
  {
    path: '/articles',
    component: () => import('./views/articles.vue')
  },
  {
    path: '/test1',
    component: () => import('./views/test1.vue')
  },
  {
    path: '/test2',
    component: () => import('./views/test2.vue')
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
import './assets/main.css'

const app = createApp(App)
app.config.unwrapInjectedRef = true
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(router,axios)

app.mount('#app')

<script>
import { routes } from './router'
export default {
  setup() {
    return {
      routes
    }
  }
}
</script>

<!-- html模板展示内容 -->
<template>
    <router-view ></router-view>
</template>