我来帮你总结这个 Vue 项目中的重要知识点：
Vue Router 路由相关知识点#
- 基础路由配置
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
2
3
4
5
6
7
8
9
10
11
|
// 子路由配置示例
{
path: '/course',
component: CourseView,
children: [
{
path: 'js',
component: JsView
}
]
}
|
- 路由导航守卫
1
2
3
4
5
6
|
router.beforeEach((to, from, next) => {
// to: 要去的路由
// from: 来源路由
// next: 放行函数
// 常用场景：登录验证、权限控制
})
|
- 编程式导航
1
2
3
4
5
6
7
8
9
10
|
// 基本跳转
router.push('/path')
// 带参数跳转
router.push({
path: '/user',
query: {
username: userName
}
})
|
Vue 3 组合式 API#
- 组件基础结构
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
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
}
})
|
- 路由相关 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 组件通信#
- Props 父传子
1
2
3
4
5
6
7
8
9
|
<!-- 父组件 -->
<child-component :message="parentMessage" />
<!-- 子组件 -->
<script setup>
defineProps({
message: String
})
</script>
|
- 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 # 入口文件
|
实践要点#
- 路由权限控制
- 使用路由守卫进行登录验证
- 根据用户状态决定路由跳转
- 组件设计原则
- 组件职责单一
- 合理使用 Props 和 Emits
- 适当拆分组件提高复用性
- 数据管理
- 合理使用响应式数据
- 选择适当的数据通信方式
- 注意数据的双向绑定
- 性能优化
- 路由懒加载
- 合理使用计算属性
- 避免不必要的组件重渲染
常用功能实现#
- 登录功能
1
2
3
4
|
// 1. 表单数据绑定
// 2. 登录逻辑处理
// 3. 路由跳转与参数传递
// 4. 登录状态维护
|
- 路由权限
1
2
3
|
// 1. 全局路由守卫
// 2. 登录状态判断
// 3. 条件跳转
|
这些是项目中使用到的主要知识点，建议：
- 多练习路由配置和导航守卫的使用
- 熟悉组合式 API 的基本使用方法
- 理解组件间不同的通信方式
- 掌握项目的基本结构和最佳实践
需要特别注意的是路由守卫的使用，因为它关系到整个应用的导航流程和权限控制。同时，组合式 API 的使用也是 Vue 3 中的重点，需要多加练习。