使用AI一步一步实现若依前端(3)

功能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：只局部刷新内容区域（像翻电子书，内容瞬间切换）。

为什么需要它？

一.操作步骤

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）

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）

  

    我是首页
  

二.功能验证

启动项目，浏览器输入local host:5173/login，点击登录按钮后跳转到首页。

三.知识点拓展

1. Vue Router核心概念

• 路由配置：通过routes数组定义路径与组件的映射关系

const routes = [
  { path: '/login', component: Login },
  { path: '/index', component: Home }
]

• 路由模式：

• createWebHistory()：生产环境推荐（需要服务器配置支持）

• createWebHashHistory()：带#的哈希模式，兼容性更好

2. 路由导航方式

• 声明式导航（模板中使用）：

登录

• 编程式导航（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代码分割，按需加载路由组件

四.思考

1.如果不用VueRouter，要怎么实现点击登录按钮，页面跳转到首页？