Vue 3 项目踩坑总结与知识点复习

1. 路由导航守卫与登录跳转

问题描述

登录后无法跳转到用户页面，形成循环跳转。

解决方案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

router.beforeEach((to, from, next) => {
  // 如果是从登录页面来的，允许访问用户页面
  if (from.path === '/login' && to.path === '/user') {
    next()
  }
  // 其他情况下访问用户页面，重定向到登录
  else if (to.path === '/user') {
    next('/login')
  } else {
    next()
  }
})

知识点

  • 路由守卫的执行顺序
  • 登录状态的判断逻辑
  • next() 函数的正确使用

2. 路由过渡动画问题

问题描述

  • 组件切换时动画不同步
  • 页面闪烁或消失
  • 动画效果不一致

解决方案

使用 Vue Transition 组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<RouterView v-slot="{ Component }">
  <Transition
    enter-active-class="transition-all duration-300 ease-out"
    enter-from-class="opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="transition-all duration-200 ease-in"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
    mode="out-in"
  >
    <component :is="Component" />
  </Transition>
</RouterView>

知识点

  • Transition 组件的 mode 属性
  • Tailwind 过渡类的使用
  • 避免自定义 CSS 与 Tailwind 的冲突

3. 样式冲突问题

问题描述

自定义 CSS 与 Tailwind 类冲突导致样式异常。

解决方案

  1. 使用 Tailwind 工具类替代自定义 CSS
  2. 正确使用 CSS 作用域

知识点

  • Tailwind 类的优先级机制
  • CSS 作用域（scoped）的重要性
  • 原子化 CSS 的优势

4. 组件封装与通信

问题描述

组件间数据传递和状态管理。

解决方案

1
2
3
4
5
6
7
8

// 父组件传递数据
<child-component :data="parentData" @update="handleUpdate" />

// 子组件接收数据
<script setup>
const props = defineProps(['data'])
const emit = defineEmits(['update'])
</script>

知识点

  • Props 数据传递
  • 事件发射与监听
  • 组件通信最佳实践

5. 布局与响应式设计

问题描述

页面布局不合理，footer 定位问题。

解决方案

1
2
3
4
5
6
7
8
9

<template>
  <div class="min-h-screen bg-gray-50 flex flex-col">
    <HeaderCom />
    <main class="flex-grow">
      <!-- 内容区域 -->
    </main>
    <FooterCom />
  </div>
</template>

知识点

  • Flex 布局的使用
  • 响应式设计原则
  • Tailwind 布局工具类

最佳实践总结

  1. 路由配置

    • 合理使用导航守卫
    • 正确处理路由权限
    • 优化路由切换体验

  2. 样式管理

    • 优先使用 Tailwind 工具类
    • 避免不必要的自定义 CSS
    • 注意样式冲突问题

  3. 组件设计

    • 遵循单一职责原则
    • 合理划分组件层级
    • 规范组件通信方式

  4. 性能优化

    • 合理使用过渡动画
    • 避免不必要的组件重渲染
    • 优化页面加载性能

找到具有 1 个许可证类型的类似代码

我来帮你总结这个 Vue 项目中的重要知识点：

Vue Router 路由相关知识点

  1. 基础路由配置
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 基本结构
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/路径',
      name: '路由名称',
      component: () => import('组件路径')
    }
  ]
})
  1. 嵌套路由
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 子路由配置示例
{
  path: '/course',
  component: CourseView,
  children: [
    {
      path: 'js',
      component: JsView
    }
  ]
}
  1. 路由导航守卫
1
2
3
4
5
6

router.beforeEach((to, from, next) => {
  // to: 要去的路由
  // from: 来源路由
  // next: 放行函数
  // 常用场景：登录验证、权限控制
})
  1. 编程式导航
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 基本跳转
router.push('/path')

// 带参数跳转
router.push({
  path: '/user',
  query: {
    username: userName
  }
})

Vue 3 组合式 API

  1. 组件基础结构
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<script setup>
// 组合式 API 写法
import { ref, onMounted } from 'vue'

// 响应式数据
const count = ref(0)

// 生命周期钩子
onMounted(() => {
  // 组件挂载后执行
})
</script>
  1. 响应式数据处理
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// ref 用于基础类型
const userName = ref('')
// 修改值
userName.value = '新值'

// reactive 用于对象类型
const state = reactive({
  user: {
    name: '',
    age: 0
  }
})
  1. 路由相关 Hooks
1
2
3
4
5
6
7
8

// 在组合式 API 中使用路由
import { useRouter, useRoute } from 'vue-router'

const router = useRouter() // 用于路由跳转
const route = useRoute()   // 用于获取当前路由信息

// 获取路由参数
const username = route.query.username

Vue 组件通信

  1. Props 父传子
1
2
3
4
5
6
7
8
9

<!-- 父组件 -->
<child-component :message="parentMessage" />

<!-- 子组件 -->
<script setup>
defineProps({
  message: String
})
</script>
  1. Emits 子传父
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['update'])
const handleClick = () => {
  emit('update', '数据')
}
</script>

<!-- 父组件 -->
<child-component @update="handleUpdate" />

Vue 项目结构

1
2
3
4
5
6
7

src/
  ├── assets/      # 静态资源
  ├── components/  # 公共组件
  ├── router/      # 路由配置
  ├── views/       # 页面组件
  ├── App.vue      # 根组件
  └── main.js      # 入口文件

实践要点

  1. 路由权限控制
  • 使用路由守卫进行登录验证
  • 根据用户状态决定路由跳转
  1. 组件设计原则
  • 组件职责单一
  • 合理使用 Props 和 Emits
  • 适当拆分组件提高复用性
  1. 数据管理
  • 合理使用响应式数据
  • 选择适当的数据通信方式
  • 注意数据的双向绑定
  1. 性能优化
  • 路由懒加载
  • 合理使用计算属性
  • 避免不必要的组件重渲染

常用功能实现

  1. 登录功能
1
2
3
4

// 1. 表单数据绑定
// 2. 登录逻辑处理
// 3. 路由跳转与参数传递
// 4. 登录状态维护
  1. 路由权限
1
2
3

// 1. 全局路由守卫
// 2. 登录状态判断
// 3. 条件跳转

这些是项目中使用到的主要知识点，建议：

  1. 多练习路由配置和导航守卫的使用
  2. 熟悉组合式 API 的基本使用方法
  3. 理解组件间不同的通信方式
  4. 掌握项目的基本结构和最佳实践

需要特别注意的是路由守卫的使用，因为它关系到整个应用的导航流程和权限控制。同时，组合式 API 的使用也是 Vue 3 中的重点，需要多加练习。