建站实战干货

vue3 创建简单路由的简单笔记

导入和配置路由

import { createRouter, createWebHistory, type Router, type RouterOptions } from 'vue-router'
import MainPage from '../../pages/main/MainPage.vue'
import AboutPage from '../../pages/about/AboutPage.vue'// 2. 定义路由映射表
const routes = [{path: '/',name: 'main',component: MainPage},{path: '/about',name: 'About',component: AboutPage},
]const routeOptions: RouterOptions = {routes,history: createWebHistory()
}
const router: Router = createRouter(routeOptions)
console.log(111)
export default router

加载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import projectRouter from './scripts/route/project-router'const app = createApp(App)
app.use(projectRouter).mount('#app')

应用路由

<template><RouterView />
</template><style scoped></style><script lang="ts">
import { RouterView } from 'vue-router';</script>