vue3加vite安装路由并跳转页面

最近使用了vue3中的路由器，记录一下。
1.首先安装路由，我使用的是pnpm，也可以使用npm安装

pnpm i vue-router@4
或者
npm i vue-router@4

2.新建页面a.vue

<script setup>
 import {
      ref } from "vue";
</script>

<template>
a
</template>

<style scoped>
</style>

3.在页面创建router文件夹，新建页面
index.js

import {createRouter, createWebHistory} from 'vue-router'
import routes from './router.js'
 
const router = createRouter({
    history: createWebHistory(), 
    routes
})
 
export default router

router.js

const routes = [
{
        name: 'h',
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    },
    {
        name: 'a',
        path: '/a',
        component: () => import('../components/a.vue')
    }
    
];
 
export default routes//导出

在main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementUI).mount('#app')

下面就可以跳转页面了，由于vue3和vue2跳转方式不一样，所以我一开始还是使用this.$router.push来跳转，结果报错，然后在网上看才发现也是按需引入，然后才能使用。
跳转路由界面 h.vue

<script setup>
import