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

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>