为Vue TypeScript 项目添加 router 路由，跳转到Chat AI页面

目录

1. 创建router路由文件

2. main.ts

3. App.vue

4. 运行项目

5. 查看效果

---

在之前的文章中，从0开始搭建一个 Vue3 和 TypeScript 项目

我们已经创建好了一个Vue TypeScript 项目，现在我们给项目添加 router 路由功能。跳转到开发好的一个AI聊天页面。

1. 创建router路由文件

在项目中创建src/router/index.js文件

import { createRouter, createWebHistory } from 'vue-router'import HomeView from '@/views/HomeView.vue'const routes = [  {    path: '/home',    name: 'HomeView',    component: HomeView  }]const router = createRouter({  history: createWebHistory(),  routes})export default router 

2. main.ts

import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')

3. App.vue

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

4. 运行项目

安装Vue Router依赖，执行以下命令：

npm install vue-router@4

启动

npm run dev

5. 查看效果

访问http://localhost:5173/home

在这个页面的下面，我在router中添加了一个Chat聊天页面，点击后可以查看联调对话框页面效果：

发送消息：你是谁

以上就是我们在项目中加入router模块，并跳转到一个聊天页面的效果。

欢迎WX搜索  南and北 ，获得更多内容，留言交流！