vue3+ts项目安装路由

• 命令行

npm install vue-router@4

• 声明路由文件

src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw>=[
  {
    path:'/',
    name:'Home',
    component:()=>import('../components/HelloWorld.vue') 
  },
  {
    path:'/trans',
    name:'Trans',
    component:()=>import('../views/TransValue/TransIndex.vue')
  }
]
const router=createRouter({
  history:createWebHashHistory(),
  routes
})

export default router

• 修改main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

• 修改App.vue

<template>
  <router-link class="a_link" to="/">home</router-link>
  <router-link to="/trans">transValue</router-link>
  <router-view></router-view>
</template>

•  界面跳转

...
import { useRouter } from 'vue-router';
const router=useRouter()
...
router.push({...})