功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目
前言
Vue Router了解一下！
Vue Router 简单来说就是「Vue 应用的导航系统」，帮你解决两大问题：
1. 「点哪里跳哪里」 —— 路径和组件的绑定
• 作用：把浏览器地址栏的路径（比如 /home、/about）和对应的页面组件关联起来。
• 类比：就像给手机桌面（App.vue）上的每个 App（组件）设置一个快捷方式（路径）。
// 举个配置例子：
const routes = [{ path: '/', component: Home }, // 输入网址就打开首页{ path: '/shop', component: Shop } // 输入/shop就跳转商城页
]
2. 「丝滑切换不卡顿」 —— 单页面应用体验
• 传统网站：每次跳转都要重新加载整个页面（像翻书一样一页页翻）。
• Vue Router：只局部刷新内容区域（像翻电子书，内容瞬间切换）。
<!-- 在 App.vue 中只需要一个「画框」 -->
<template><router-view></router-view> <!-- 这里会根据路径切换不同组件 -->
</template>
为什么需要它？
| 场景 | 不用 Vue Router | 用 Vue Router |
|---|---|---|
| 点击「关于我们」 | 整个页面刷新，白屏1秒 | 瞬间切换，像翻电子书 |
| 浏览器前进/后退按钮 | 无法记录页面状态 | 自动记录浏览历史 |
| 分享链接给朋友 | 只能分享首页 | 可以直接分享具体页面链接 |
一.操作步骤
1.安装VueRouter
pnpm add vue-router@4
2.新建配置文件（src/router/index.js）
import { createWebHistory, createRouter } from 'vue-router'const constantRoutes = [{path: '/login',component: () => import('@/views/login.vue'),},{path: '/index',component: () => import('@/views/index.vue'),}
]const router = createRouter({history: createWebHistory(),routes: constantRoutes,scrollBehavior(to, from, savedPosition) {return savedPosition || { top: 0 }}
})export default router
3.全局注册（main.js）
import router from './router'app.use(router)
app.mount('#app')
4.设置router-view标签（App.vue）
<script setup></script>
<template><router-view />
</template>
5.修改登录按钮逻辑（login.vue）
import { useRouter } from 'vue-router'
const router = useRouter()// ...// 登录处理const handleLogin = async () => {try {// 表单验证await loginForm.value.validate()// 这里添加实际登录逻辑router.push({path:'/index'})ElMessage.success('登录成功!')} catch (error) {ElMessage.error('请正确填写表单')}}
6.新建首页（src/views/index.vue）
<script setup lang="ts"></script><template><div>我是首页</div>
</template><style scoped lang="scss">
</style>
二.功能验证
启动项目，浏览器输入local host:5173/login，点击登录按钮后跳转到首页。
三.知识点拓展
1. Vue Router核心概念
• 路由配置：通过routes数组定义路径与组件的映射关系
const routes = [{ path: '/login', component: Login },{ path: '/index', component: Home }
]
• 路由模式：
• createWebHistory()：生产环境推荐（需要服务器配置支持）
• createWebHashHistory()：带#的哈希模式，兼容性更好
2. 路由导航方式
• 声明式导航（模板中使用）：
<router-link to="/login">登录</router-link>
• 编程式导航（JS代码中控制）：
// 在setup中使用
import { useRouter } from 'vue-router'
const router = useRouter()// 跳转方法
router.push('/index') // 添加历史记录
router.replace('/index') // 替换当前记录
router.go(1) // 前进/后退
3. 动态路由加载
• 组件懒加载：提升首屏加载速度
component: () => import('@/views/login.vue')
• 配合webpack代码分割，按需加载路由组件
