VueRouter与商品表格开发全解析

一、Vue Router 核心知识（含安装、配置、使用）

1. 路由安装与环境准备

安装命令：项目根目录执行  npm install vue-router@4（Vue 3 适配版本为 vue-router 4.x）。核心依赖：安装后需在  main.js 中引入路由实例并通过  app.use(router) 注入，确保路由功能全局生效。

2. 路由核心配置（router.js）

创建路由实例：通过  createRouter 函数创建，指定路由模式和路由规则数组。 路由模式： history: createWebHashHistory()（哈希模式，URL 含  #，无需后端配置）。重定向：通过  redirect 配置默认路由，例如  { path: '/', redirect: '/movie' }（访问根路径自动跳转到  /movie）。 路由规则定义： 基础路由： { path: '/home', component: 组件导入路径 }，直接映射单个组件。嵌套路由：通过  children 配置子路由，父组件需包含  <router-view> 承载子组件，例如  /movie 父路由下嵌套  :id 动态子路由。动态路由：路径中通过  :参数名 定义动态参数，例如  path: ':id'，组件中通过  $route.params.id 获取参数值。

3. 路由使用关键组件与语法

<router-link>：路由跳转链接， to 属性指定目标路径（如  to="/movie/1"），默认渲染为  <a> 标签，自带激活状态类  router-link-active。 <router-view>：路由视图容器，用于渲染当前匹配路由对应的组件，父路由和子路由可嵌套使用。组件导入：支持动态导入组件（ component: () => import('组件路径')），实现代码分割，优化项目加载性能。

4. 路由核心特性

嵌套路由：实现页面布局复用（如父路由保留导航栏，子路由切换内容区域）。动态路由：通过单个组件匹配多个路径（如  MovieDetails.vue 匹配  /movie/1、 /movie/2 等），减少组件冗余。激活状态： <router-link> 跳转后自动添加激活类，方便自定义激活样式。

二、商品管理表格开发核心知识

1. 两种开发模式（结构与内容关系）

（1）普通数组循环模式（单组件）

核心逻辑：结构与数据绑定在同一个组件，通过  v-for 循环渲染数组数据。关键语法： v-for="item in goodsList" :key="item.id"（ key 需唯一，推荐使用数据 ID）。适用场景：简单表格，结构和数据逻辑无需复用的场景。

（2）插槽分离模式（父子组件）

核心逻辑：子组件提供表格结构（表头、表格框架），父组件通过插槽填充内容（数据、自定义表头）。插槽分类： 具名插槽：通过  name 属性区分（如表头插槽  #header-id、数据行插槽  #body），实现精准内容填充。默认插槽：未命名的插槽，用于承载通用内容。 适用场景：表格结构需复用（如多个页面使用相同表格框架），内容需灵活定制的场景。

2. 数据处理与页面渲染

响应式数据：通过  ref() 定义商品数组  goodsList，确保数据变化时页面自动更新。数据渲染：模板中通过  {{ item.属性名 }} 渲染数据（如  {{ item.goods_name }}、 {{ item.goods_price }}）。自定义逻辑：支持在模板中通过条件判断（ v-if）实现标签差异化渲染（如按价格区分商品标签颜色），通过事件绑定（ @click）实现操作按钮功能（如删除、编辑）。

3. 表格样式优化

基础样式：设置  border-collapse: collapse 合并表格边框， text-align: center 使内容居中， padding 调整单元格内边距。差异化样式：通过内联样式或类绑定，实现表头高亮、标签颜色区分、按钮样式定制等。

三、核心知识关联与总结

路由与组件：路由是组件的 “导航系统”，通过路由规则将路径与组件关联，实现页面切换；表格组件可作为路由匹配的目标组件（如  /goods 路由对应商品表格组件）。响应式与渲染：路由传递的动态参数（如商品 ID）可结合响应式数据，实现组件数据的动态加载；表格渲染依赖响应式数组，确保数据更新后视图同步刷新。复用性设计：路由嵌套实现布局复用，插槽实现表格结构复用，均是 Vue 开发中 “复用优先” 思想的体现。