vue-router4 添加ts

vue-router4 添加ts需要进行以下几个步骤。

第一步，安装依赖。在命令行中进入项目的根目录，执行以下命令：

npm install --save vue-router@next @types/vue-router

这个命令会安装vue-router4和相应的类型定义文件@types/vue-router。

第二步，创建路由文件。在src目录下创建一个router目录，然后新建一个router.ts文件。

在router.ts中，按照以下代码编写路由相关的内容：

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这段代码定义了路由的配置，包括每个路由的路径、对应的组件等。

第三步，创建Vue组件。在src/views目录下创建Home.vue和About.vue两个组件，并编写相关的代码。

第四步，使用路由。在main.ts中，按照以下代码引入路由并使用：

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

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

这个代码将路由注册到vue实例中，在应用中使用路由。

以上就是vue-router4添加ts的步骤。需要注意的是，在添加路由时，需要安装vue-router4和相应的类型定义文件，并按照一定的规范编写路由配置和Vue组件。