🤟致敬读者

• 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉

📘博主相关

• 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息

---

---

📃文章前言

• 🔷文章均为学习工作中整理的笔记。
• 🔶如有错误请指正，共同学习进步。

---

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第六篇:页面跳转功能实现（Router的引入和使用）

从零搭建Vue3项目实战，借助AI工具辅助学习和代码生成，零基础小白亦可轻松上手实现。

以下为系列篇所有文章：
《从零搭建Vue3项目实战》零基础入门系列第一篇:开发环境准备
《从零搭建Vue3项目实战》零基础入门系列第二篇:项目创建和初始化
《从零搭建Vue3项目实战》零基础入门系列第三篇:ElementPlus引入和应用
《从零搭建Vue3项目实战》零基础入门系列第四篇:登录页面实现
《从零搭建Vue3项目实战》零基础入门系列第五篇:登录页面优化及使用AI学习代码
《从零搭建Vue3项目实战》零基础入门系列第六篇:页面跳转功能实现（Router的引入和使用）
《从零搭建Vue3项目实战》零基础入门系列第七篇:菜单栏实现
《从零搭建Vue3项目实战》零基础入门系列第八篇:菜单栏优化和阶段项目源码
《从零搭建Vue3项目实战》零基础入门系列第九篇:用户管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十篇:商品管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十一篇:订单管理功能实现
《从零搭建Vue3项目实战》零基础入门系列第十二篇（完结篇）:数据统计功能实现
《从零搭建Vue3项目实战》零基础入门一篇通关（AI辅助搭建Vue3+ElemntPlus后台管理项目）

系列文章均收录在前端vue3入门实战专栏中，可订阅专栏了解更多内容

1. 提问AI如何实现页面跳转

在完成登录页的功能后，如何实现登录后跳转到首页，下面进行实现
AI提示词

如何使用router进行页面跳转

ai回答先让安装router，然后配置router，最后使用router，我们之前在创建项目时已经勾选了router，所以安装和引入就不需要了，直接使用即可，但为了更熟悉router的内容，这里也将安装和引入步骤写上，你无需操作，直接从使用那一步开始即可

2. 安装Router

安装router的命令，默认下载最新版本

npm install vue-router

如图中的命令不是完全正确，@符号后跟的是版本号，可指定版本

3. 配置Router

在src/router/index.js代码中配置router，注意，这里可能和之前的代码有所区别，无需修改原来的代码，这里也可以参考

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import LoginView from '../views/LoginView.vue';
import HomeView from '../views/HomeView.vue'; // 假设你有一个 HomeView.vue 页面const routes = [{path: '/',name: 'Login',component: LoginView},{path: '/home',name: 'Home',component: HomeView}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

如下图

4. 使用路由Router

在main.js中使用路由配置，ai回答的main.js的代码如下（无需修改原来的代码，这里知识ai回答的使用方法）

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

ai回答如下图

5. 登录页代码使用router进行页面跳转

ai回答第四步，在LoginView.vue中修改handleLogin方法中的代码，使用router进行页面跳转
应用后的代码如下，先将原来的LoginVeiw.vue代码内容全部删除，将ai回答的代码使用右上角的使用代码图标应用代码，如下图

更新后的完整代码如下（最终使用的代码）
LoginView.vue

<template><div class="login-container"><div class="login-form"><h2>Login</h2><el-form :model="loginForm" label-width="100px"><el-form-item label="Account"><el-input v-model="loginForm.account"></el-input></el-form-item><el-form-item label="Password"><el-input type="password" v-model="loginForm.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleLogin">Login</el-button></el-form-item></el-form></div></div>
</template><script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';const router = useRouter();const loginForm = reactive({account: '',password: ''
});const handleLogin = () => {// 登录逻辑console.log('Login form:', loginForm);// 假设登录成功后跳转到 Home 页面router.push({ name: 'Home' });
};
</script><style scoped>
.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-image: url('@/assets/login01img.jpg'); /* 确保路径正确 */background-size: cover;background-position: center;
}.login-form {background: rgba(255, 255, 255, 0.8);padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

6. 首页代码更新（HomeView.vue）

跳转后的首页界面代码修改，将原来的代码删除，然后在ai回答的HomeView.vue代码内容右上角使用代码

更新后的代码如下
HomeView.vue

<!-- src/views/HomeView.vue -->
<template><div class="home-container"><h1>Welcome to Home Page</h1></div>
</template><style scoped>
.home-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}
</style>

7. 页面跳转测试

打开浏览器，访问登录页，输入内容后点击登录按钮
出现问题了，并没有正确跳转到首页页面，浏览器页面鼠标右键打开检查（Inspect），打开控制台，如下
报错内容如下

runtime-core.esm-bundler.js:268 Uncaught Error: No match for{"name":"Home","params":{}}at handleLogin (LoginView.vue:35:10)

no match for name Home表示无法匹配路由地址名Home，代码在LoginView.vue的35行
这里跳转过去的路由地址的名称为Home

但路由router/index.js中配置的是home，如下图
两个地方的名称不一致，现在修改为一致即可
将LoginView.vue中的Home修改为home
修改后的LoginView.vue代码如下

<template><div class="login-container"><div class="login-form"><h2>Login</h2><el-form :model="loginForm" label-width="100px"><el-form-item label="Account"><el-input v-model="loginForm.account"></el-input></el-form-item><el-form-item label="Password"><el-input type="password" v-model="loginForm.password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleLogin">Login</el-button></el-form-item></el-form></div></div>
</template><script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';const router = useRouter();const loginForm = reactive({account: '',password: ''
});const handleLogin = () => {// 登录逻辑console.log('Login form:', loginForm);// 假设登录成功后跳转到 Home 页面router.push({ name: 'home' });
};
</script><style scoped>
.login-container {display: flex;justify-content: center;align-items: center;height: 100vh;background-image: url('@/assets/login01img.jpg'); /* 确保路径正确 */background-size: cover;background-position: center;
}.login-form {background: rgba(255, 255, 255, 0.8);padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

再次访问浏览器，登录，页面正常跳转到HomeView.vue对应的页面，如下

以上就是页面跳转的内容

---

📜文末寄语

• 🟠关注我，获取更多内容。
• 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
• 🟢《全栈知识库》技社区，集结全栈各领域开发者，期待你的加入。
• 🔵​加入开发者的《专属社群》，分享交流，技术之路不再孤独，一起变强。
• 🟣点击下方名片获取更多内容🍭🍭🍭👇

---