vue3中的路由写法

1、scr文件下创建一个router文件夹 文件夹下创建要给index.js

// 引入路由对象
import { createRouter, createWebHistory } from 'vue-router'
// 路径配置 .vue 不可省略
const routes = [
    { path: '/', redirect: '/hello'},
    {path: '/hello', name: 'hello', component: () => import('../components/HelloWorld.vue')},
    {path: '/home', name: 'home', component: () => import('../components/home.vue')},
]
const router = createRouter({
    history: createWebHistory(), // 1、createWebHistory 创建history路由模式   2、createWebHashHistory 创建hash路由模式
    routes: routes
})
export default router

2.在main.js下引入配置路由的文件并且挂载在实例中

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'

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

3.App.vue写上<router-view></router-view>

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

4.效果