首先需要下载vue-router

yarn add vue-router@4.0.0-beta.3 写需要的版本号

接着修改main.js为main.ts

修改TS文件后，ts是不知道.vue文件的所以需要我们创建一个shims-vue.d.ts 的文件声明类型

declare module '*.vue' {
    import { ComponentOptions } from "vue";
    const componentOptions :ComponentOptions
    export default componentOptions
}

在main.ts里面引入需要的模块并且定义

import Frank  from "./components/Fanrk.vue"
import Frank2  from "./components/Frank2.vue"
import {createWebHashHistory,createRouter} from "vue-router"

const history = createWebHashHistory()
const router = createRouter({
    history:history,
    routes:[
        {
            path:'/',
            component:Frank
        },
        {
            path:'/Frank2',
            component:Frank2
        }
    ]

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

效果图

点击frank2 后

vue配置路由~~~

效果图