目录
[先给按钮绑定@click="方法名"绑定点击事件,然后在方法里面实现这个this.router.push即可](#先给按钮绑定@click="方法名"绑定点击事件,然后在方法里面实现这个this.router.push即可)
这个标签的写法可以由什么更规范的替换?
1第六天课程介绍
2路由模块封装
步骤:将main.js中的路由配置一系列信息导入到index.js,在里面用到vue的,所以需要import Vue from 'vue' 最后export default router(供index.js使用)
3使用router-link替代a标签实现高亮
问题:
高亮显示不想使用默认的白色,怎么设置颜色?
4自定义匹配的类名
5声明式导航-跳转传参
问题:
前两张图的跳转传参方式有什么区别?
查询参数传参使用的是?动态路由传参用的是/，
查询参数接受值用的是route.query.值,动态路由是route.params.参数名
这两个图片中的方式步骤?
查询参数跳转传参:在<router-link>里面配置to路径,然后接受使用$route.query.值
动态路由传参使用的是先配置动态路由,就是在router包下文件里面的new router时里面的routes里面添加路径,然后配置to,最后的就是使用$route.params.参数名
6路由重定向
7编程式导航-两种路由跳转方式
先给按钮绑定@click="方法名"绑定点击事件,然后在方法里面实现这个this.$router.push即可
总结
注意name里面的动态路由传参使用的是params
8面经基础版-案例效果分析
问题:
怎么配置二级路由?
在routes里面使用childre:[]进行配置并且还得准备二级路由出口(在哪展示)
问题:
这个<a>标签的写法可以由什么更规范的替换?
<router-link>,使用这个才会自动有高亮显示(当鼠标点击的时候),记得配置to的使用里面不再需要#
9面经基础版-路由配置
10面经基础版-首页请求渲染
写在9里面了
11面经基础版-传参(查询参数&动态路由)
记得加上重定向
返回上一页,使用@click="$router.back()"
这个是防止出现页面没加载出来,点赞量这些常量就出现的情况
12面经基础版-详情页渲染
跟首页请求一样
13面经基础版-缓存组件
问题:
什么是组件名?
注意:
还有destroyed
14基于VueCil自定义创建项目
详细流程在
088-基于VueCli自定义创建项目_哔哩哔哩_bilibili
15ESLint手动修正代码规范错误
16ESLint自动修正代码规范错误
------保存时让 ESLint 自动修小错，但不让工具自动强行格式化代码，兼顾了 "错误修复的便捷性" 和 "代码格式的自主性"。
17总结
Vue 路由与工程化核心知识点深度总结
一、课程概述与 Vue 路由基础
在 Vue 前端开发体系中，路由是实现单页应用（SPA）页面跳转与状态管理的核心机制，而工程化则是保障大型项目可维护性、规范性的关键实践。本次课程围绕 Vue 路由的封装、使用、传参，以及工程化中的代码规范、项目创建等展开，以下是对各模块知识点的深度解析。
- 课程整体脉络与目标
本课程以 "Vue 路由实战 + 工程化规范" 为双主线，从路由模块的封装复用入手，逐步深入到路由导航、传参、组件缓存等进阶用法，同时结合 ESLint 代码规范与 VueCli 项目创建，全面覆盖 Vue 开发从 "功能实现" 到 "工程化落地" 的核心环节。通过理论讲解与问题驱动的方式，帮助开发者掌握 Vue 路由的底层逻辑与工程化实践的最佳路径。
二、路由模块封装：解耦与复用的关键
在中大型 Vue 项目中，路由模块的封装是提升代码可维护性的首要步骤，其核心目标是将路由配置从主逻辑中解耦，实现路由规则的集中管理。
2.1 路由封装的核心思路
分离关注点：将路由的定义（routes 数组）、路由实例创建（new VueRouter()）与主应用（main.js）分离，分别维护在 router/index.js 等文件中。
支持模块化扩展：当项目需要新增页面或路由规则时，只需在路由模块中添加配置，无需修改主逻辑，降低耦合度。
2.2 封装的实操步骤
创建路由配置文件：在项目中新建 src/router/index.js，引入 Vue 和 VueRouter，定义路由规则数组 routes。
javascript
运行
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入页面组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
mode: 'history', // 可选hash/history模式
routes
})
export default router
在主应用中挂载路由：在 main.js 中引入封装好的路由实例，通过 Vue 实例的 router 选项注入。
javascript
运行
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
2.3 封装的优势
代码结构更清晰，路由规则集中管理，便于团队协作维护；
支持路由的懒加载（后续可结合 import() 动态导入组件，优化首屏加载性能）；
可在路由模块中统一处理路由守卫（全局前置守卫、后置守卫等），实现权限控制、页面埋点等全局逻辑。
三、使用 router-link 替代 a 标签实现高亮
在 Vue 路由中，router-link 是官方推荐的 "声明式导航组件"，用于替代原生 <a> 标签，其核心优势是支持路由高亮、避免页面全量刷新，同时与 Vue 路由的底层机制深度集成。
3.1 router-link 的基础用法
html
预览
<!-- 替代 <a href="/about">关于我们</a> -->
<router-link to="/about">关于我们</router-link>
to 属性：等同于 a 标签的 href，但支持对象格式（如 to="{ name: 'About', params: { id: 1 } }"），用于传递路由参数；
渲染结果：默认会被渲染为 <a> 标签，可通过 tag 属性指定渲染为其他标签（如 tag="button" 渲染为按钮）。
3.2 路由高亮的默认行为与自定义
默认高亮逻辑：当 router-link 对应的路由是当前活跃路由时，Vue Router 会自动为其添加 router-link-exact-active（精确匹配）和 router-link-active（模糊匹配）类名，从而实现样式高亮。
问题：自定义高亮颜色
若不希望使用默认的白色高亮，可通过自定义 CSS 样式覆盖类名的颜色属性：
css
/* 精确匹配时的高亮样式 */
.router-link-exact-active {
color: #409EFF; /* 示例：设置为蓝色 */
font-weight: bold;
}
/* 模糊匹配时的高亮样式 */
.router-link-active {
color: #66B1FF; /* 示例：设置为浅蓝色 */
}
若需要修改默认类名，可在创建 VueRouter 实例时配置 linkActiveClass 和 linkExactActiveClass：
javascript
运行
const router = new VueRouter({
routes,
linkActiveClass: 'my-active', // 自定义模糊匹配类名
linkExactActiveClass: 'my-exact-active' // 自定义精确匹配类名
})
然后在 CSS 中针对 my-active 和 my-exact-active 编写样式即可。
四、自定义匹配的类名：精细化样式控制
除了高亮类名的自定义，Vue Router 还支持路由元信息（meta）与动态类名绑定，实现更精细化的样式与逻辑控制。
4.1 路由元信息（meta）的应用
在路由配置中，可通过 meta 字段添加自定义信息，用于判断路由的权限、类型等，进而控制样式或逻辑。
javascript
运行
const routes = [
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true, // 标记需要权限验证
navType: 'primary' // 标记导航类型
}
}
]
结合路由守卫或组件内导航钩子，可根据 meta 信息动态添加类名：
javascript
运行
// 全局前置守卫中判断元信息
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// 需要权限，添加自定义类名
document.body.classList.add('auth-required')
} else {
document.body.classList.remove('auth-required')
}
next()
})
4.2 组件内动态绑定类名
在 router-link 或页面组件中，可通过 v-bind:class 结合路由实例的 currentRoute 属性，实现更灵活的类名控制：
html
预览
<router-link
to="/dashboard"
:class="{ 'dashboard-active': $route.path === '/dashboard' }"
>
仪表盘
</router-link>
<style scoped>
.dashboard-active {
background-color: #f0f0f0;
border-left: 3px solid #409EFF;
}
</style>
五、声明式导航 - 跳转传参：两种核心方式
在 Vue 路由中，"声明式导航" 指通过 router-link 实现的导航，传参主要有 ** 查询参数（Query）和动态路由参数（Params）** 两种方式，二者在用法、场景和 URL 表现上有明显区别。
5.1 查询参数（Query）
用法：通过 to 的对象格式传递 query 属性，例如：
html
预览
<router-link :to="{ name: 'User', query: { id: 1, name: 'John' } }">
用户详情
</router-link>
URL 表现：会将参数以 "?id=1&name=John" 的形式拼接在 URL 后，如 /user?id=1&name=John。
获取方式：在目标组件中通过 this.route.query.id 或 this.route.query.name 获取。
特点：参数会暴露在 URL 中，刷新页面参数不会丢失，适合传递非敏感的、可被分享的参数（如列表分页、搜索条件）。
5.2 动态路由参数（Params）
用法：需先在路由规则中定义动态参数，再通过 to 的对象格式传递 params 属性：
javascript
运行
// 路由规则定义
{
path: '/user/:id', // 定义动态参数id
name: 'User',
component: User
}
html
预览
<router-link :to="{ name: 'User', params: { id: 1 } }">
用户详情
</router-link>
URL 表现：参数会被嵌入 URL 路径中，如 /user/1。
获取方式：在目标组件中通过 this.$route.params.id 获取。
特点：参数不会暴露在 URL query 部分，URL 更简洁；但刷新页面时若路由未匹配会导致 404，适合传递与页面强关联的、无需分享的参数（如用户 ID、订单 ID）。
5.3 两种传参方式的区别与步骤对比
维度 查询参数（Query） 动态路由参数（Params）
路由规则定义 无需特殊定义 需在 path 中声明:参数名
URL 格式 /path?key=value /path/value
刷新页面 参数保留 需确保路由匹配，否则 404
适用场景 分页、搜索条件等 用户 ID、订单 ID 等
步骤对比：
查询参数传参步骤：
在 router-link 中通过 :to="{ query: { 键: 值 } }" 传递参数；
在目标组件中通过 this.$route.query.键 读取参数。
动态路由参数传参步骤：
在路由规则的 path 中通过 :参数名 声明动态参数；
在 router-link 中通过 :to="{ params: { 参数名: 值 } }" 传递参数；
在目标组件中通过 this.$route.params.参数名 读取参数。
六、编程式导航 - 两种路由跳转方式
除了声明式的 router-link，Vue 还支持编程式导航------ 通过 JavaScript 代码主动触发路由跳转，核心是利用 this.$router 实例的方法（push、replace、go 等）。
6.1 编程式导航的核心方法
this.$router.push(location, onComplete?, onAbort?)
作用：跳转到指定路由，向历史栈中添加新记录（点击浏览器返回按钮可回退）。
用法：
javascript
运行
// 字符串路径
this.$router.push('/user/1')
// 对象格式（含name和params）
this.$router.push({ name: 'User', params: { id: 1 } })
// 对象格式（含query）
this.$router.push({ path: '/user', query: { id: 1 } })
this.$router.replace(location, onComplete?, onAbort?)
作用：跳转到指定路由，但替换当前历史记录（点击返回按钮不会回退到上一个路由，而是更前的记录）。
适用场景：登录后跳转首页，避免用户回退到登录页。
this.$router.go(n)
作用：在历史栈中前进或后退 n 步（n 为正数前进，负数后退）。
示例：this.$router.go(-1) 等价于 "返回上一页"。
6.2 编程式导航的绑定步骤（以按钮点击为例）
给按钮绑定点击事件：在模板中为按钮添加 @click 事件，指向一个方法。
html
预览
<button @click="goToUser">跳转到用户页</button>
在方法中调用路由跳转方法：在组件的 methods 中定义方法，通过 this.$router 执行跳转。
javascript
运行
export default {
methods: {
goToUser() {
this.$router.push({ name: 'User', params: { id: 1 } })
}
}
}
七、面经基础版 - 案例效果分析与二级路由配置
在 Vue 项目的 "面试高频场景" 中，** 二级路由（嵌套路由）** 是实现页面组件嵌套的关键，而 "案例效果分析" 则是对路由功能的综合验证。
7.1 二级路由的配置步骤
二级路由的核心是路由规则的嵌套，即在父路由的 children 数组中定义子路由。
定义父路由与子路由规则：
javascript
运行
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
// 子路由（二级路由）
children: [
{
path: 'profile', // 注意：路径不带斜杠，会被拼接为/dashboard/profile
name: 'Profile',
component: Profile
},
{
path: 'settings',
name: 'Settings',
component: Settings
}
]
}
]
在父组件中添加 <router-view> 出口：子路由的组件会渲染到父组件的 <router-view> 中。
html
预览
<!-- Dashboard.vue（父组件） -->
<template>
<div class="dashboard">
<h1>仪表盘</h1>
<!-- 子路由组件的渲染出口 -->
<router-view></router-view>
</div>
</template>
导航到二级路由：可通过 router-link 或编程式导航跳转到子路由路径。
html
预览
<router-link to="/dashboard/profile">个人资料</router-link>
<router-link to="/dashboard/settings">设置</router-link>
7.2 案例效果分析的核心思路
以 "路由传参案例" 或 "嵌套路由案例" 为例，效果分析需从URL 变化、组件渲染、参数传递三个维度验证：
URL 变化：观察跳转时 URL 是否符合预期（如动态路由参数是否嵌入路径、query 参数是否拼接正确）；
组件渲染：确认目标组件是否正确渲染，嵌套路由的子组件是否在父组件的 <router-view> 中显示；
参数传递：在目标组件中打印 this.route.query 或 this.route.params，验证参数是否传递成功。
八、面经基础版 - 路由配置与 <a> 标签的规范替换
路由配置的规范性直接影响项目的可维护性，而用 router-link 替换 <a> 标签是 Vue 路由的 "最佳实践" 之一。
8.1 路由配置的规范性原则
路由命名（name）：每个路由应配置唯一的 name，便于编程式导航时通过名称跳转（避免硬编码路径）；
组件引入：优先使用懒加载（import() 动态导入），优化首屏加载性能，例如：
javascript
运行
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
重定向（redirect）：合理使用 redirect 处理旧路径兼容或默认页面跳转，例如：
javascript
运行
{
path: '/',
redirect: '/home' // 访问根路径时重定向到/home
}
8.2 <a> 标签的规范替换：用 router-link 替代的必要性
原生 <a href="/path"> 会导致页面全量刷新（单页应用的 "单页" 优势丧失），而 router-link 是 Vue Router 封装的组件，会拦截点击事件，通过 JS 实现 "无刷新跳转"，同时支持路由高亮、参数传递等功能。
替换步骤：
找到页面中所有用于导航的 <a> 标签；
将 <a href="xxx"> 替换为 <router-link to="xxx">；
若需传递参数，将 href 中的参数拼接改为 router-link 的 query 或 params 传递方式。
九、面经基础版 - 首页请求渲染与数据驱动视图
在 Vue 项目中，"首页请求渲染" 是指在首页组件挂载时，发起异步请求获取数据，再将数据渲染到页面上，这一过程需结合生命周期钩子与路由导航守卫。
9.1 首页请求渲染的实现步骤
在组件中定义数据与请求方法：
javascript
运行
export default {
data() {
return {
list: [] // 存储请求到的数据
}
},
methods: {
fetchData() {
// 模拟异步请求
axios.get('/api/list').then(res => {
this.list = res.data
})
}
}
}
在生命周期钩子中调用请求方法：通常在 mounted 钩子中发起请求（组件挂载后执行）。
javascript
运行
mounted() {
this.fetchData()
}
结合路由守卫的优化：若首页需要在路由进入时就准备数据，可使用路由前置守卫或组件内导航守卫。
javascript
运行
// 组件内导航守卫
beforeRouteEnter(to, from, next) {
// 这里无法访问this，因为组件还未创建
axios.get('/api/list').then(res => {
next(vm => {
// vm是当前组件实例，请求成功后将数据赋值给vm.list
vm.list = res.data
})
})
}
9.2 数据驱动视图的核心逻辑
Vue 的 "数据驱动" 是指视图自动响应数据变化，当 list 数据通过请求更新后，模板中绑定的 list 会自动重新渲染：
html
预览
<template>
<div class="home">
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
这种 "数据变化→视图自动更新" 的机制，是 Vue 作为 MVVM 框架的核心优势，避免了手动操作 DOM 的繁琐与易错。
十、面经基础版 - 传参 (查询参数 & 动态路由) 深度对比
在前文 "声明式导航传参" 的基础上，进一步对比查询参数与动态路由参数的底层机制、场景适配与注意事项。
10.1 底层机制差异
查询参数（Query）：基于 URL 的查询字符串（?key=value）实现，本质是 "将参数附加在 URL 后"，Vue Router 会解析 location.search 并将其映射到 $route.query。
动态路由参数（Params）：基于 URL 的路径段（/path/value）实现，Vue Router 会解析 location.pathname，并将匹配到的动态段映射到 $route.params。
10.2 场景适配与注意事项
查询参数适用场景：
需保留历史记录，刷新页面参数不丢失（如搜索结果页，用户刷新后仍能看到相同搜索结果）；
需支持参数分享（如将带 query 参数的 URL 发给他人，对方能看到相同内容）；
注意事项：参数会暴露在 URL 中，敏感数据（如 token）不宜用此方式传递。
动态路由参数适用场景：
页面与参数强绑定（如 "用户详情页" 与 "用户 ID"），URL 需体现资源层级（如 /user/1 比 /user?id=1 更具语义）；
需隐藏参数（如内部系统的流程 ID，无需用户感知）；
注意事项：必须在路由规则中声明动态参数，否则跳转时会失败；刷新页面时需确保服务器配置了对应的路由（如 history 模式下的后端 fallback）。
十一、面经基础版 - 详情页渲染：从参数获取到数据展示
"详情页渲染" 是前端开发的高频场景，通常流程是 "获取路由参数→发起详情请求→渲染页面数据"，以下是基于 Vue 路由的实现步骤。
11.1 详情页渲染的完整流程
以 "商品详情页" 为例：
定义动态路由规则：
javascript
运行
{
path: '/product/:id',
name: 'ProductDetail',
component: ProductDetail
}
在详情页组件中获取路由参数：
javascript
运行
export default {
data() {
return {
product: null // 存储商品详情数据
}
},
created() {
// 组件创建时获取参数并发起请求
const productId = this.$route.params.id
this.fetchProductDetail(productId)
},
methods: {
fetchProductDetail(id) {
axios.get(`/api/product/${id}`).then(res => {
this.product = res.data
})
}
}
}
渲染详情数据：
html
预览
<template>
<div class="product-detail" v-if="product">
<h2>{{ product.name }}</h2>
<p>{{ product.price }}</p>
<img :src="product.image" alt="商品图片">
</div>
</template>
11.2 组件复用与参数监听
若详情页组件因 "路由参数变化但组件未销毁"（如从 /product/1 跳转到 /product/2），需通过 watch 监听 $route 变化，重新发起请求：
javascript
运行
watch: {
'$route' (to, from) {
// 路由参数变化时，重新获取数据
const newId = to.params.id
this.fetchProductDetail(newId)
}
}
十二、面经基础版 - 缓存组件：提升性能与用户体验
在 Vue 中，** 组件缓存（<keep-alive>）** 可保留路由组件的状态，避免重复渲染与请求，常用于 "tabs 切换""表单页回退" 等场景。
12.1 组件缓存的基本用法
将 <router-view> 包裹在 <keep-alive> 中，即可缓存所有匹配的路由组件：
html
预览
<!-- App.vue 或布局组件中 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
被缓存的组件会触发 activated 和 deactivated 生命周期钩子（替代 mounted 和 destroyed）。
12.2 缓存的条件控制
可通过 include 和 exclude 属性控制哪些组件被缓存：
html
预览
<!-- 只缓存ProductDetail和User组件 -->
<keep-alive include="ProductDetail,User">
<router-view></router-view>
</keep-alive>
<!-- 排除Profile组件，不缓存它 -->
<keep-alive exclude="Profile">
<router-view></router-view>
</keep-alive>
其中，include 和 exclude 接收组件名（即组件的 name 选项），因此需要为组件显式定义 name：
javascript
运行
export default {
name: 'ProductDetail', // 定义组件名，用于keep-alive匹配
// ...
}
12.3 问题：什么是组件名？
组件名是 Vue 组件的标识，用于：
<keep-alive> 的 include/exclude 匹配；
组件递归调用（自身调用自身时通过 name 识别）；
开发者工具中组件的显示名称，便于调试。
组件名的定义方式：
javascript
运行
export default {
name: 'MyComponent', // 显式定义
// ...
}
若未显式定义 name，Vue 会根据组件文件名自动推断（如组件文件是 ProductDetail.vue，则默认 name 为 ProductDetail）。
注意事项：
组件名需保证唯一性，避免与其他组件重名；
若使用 <keep-alive> 的 include/exclude，建议显式定义组件名，避免自动推断的不确定性。
十三、基于 VueCli 自定义创建项目：工程化的起点
VueCli 是 Vue 官方的工程化脚手架工具，支持自定义项目配置（如包管理工具、ESLint 规则、路由模式等），是大型项目开发的基础。
13.1 自定义创建项目的步骤
安装 VueCli：确保已全局安装 @vue/cli（若未安装，执行 npm install -g @vue/cli）。
创建项目：执行 vue create my-project，进入交互式配置界面。
选择自定义配置：
包管理工具：选择 npm 或 yarn；
特性选择：勾选 "Router"（路由）、"Vuex"（状态管理，可选）、"ESLint"（代码规范）等；
ESLint 规则：选择 "ESLint + Standard config"（标准规范）或 "ESLint + Airbnb config"（ Airbnb 规范）；
额外功能：选择 "Linter / Formatter" 的触发时机（如 "保存时" 或 "提交时"）；
配置文件位置：选择将配置放在独立文件（如 .eslintrc.js）或 package.json 中。
等待项目创建与依赖安装，完成后进入项目目录 cd my-project，执行 npm run serve 启动开发服务器。
13.2 自定义配置的优势
按需选择技术栈（如是否需要路由、状态管理），避免项目冗余；
统一团队代码规范（通过 ESLint 规则），提升代码可读性与可维护性；
集成开发工具链（热更新、代码检查、构建优化等），提升开发效率。
十四、ESLint 手动修正代码规范错误
ESLint 是前端代码规范检查工具，能识别并提示代码中的语法错误、风格问题（如缩进、分号、引号等）。"手动修正" 是指开发者根据 ESLint 提示，逐个定位并修改问题代码。
14.1 ESLint 错误的识别方式
开发工具提示：在 VS Code 中，安装 ESLint 插件后，代码中的规范问题会以 "波浪线" 标出， hover 后可查看错误原因。
命令行检查：执行 npm run lint（或 vue-cli-service lint），会在终端列出所有 ESLint 错误，包含文件路径、行号、错误原因。
14.2 手动修正的步骤
以 "缺少分号""引号使用不统一" 为例：
定位错误：根据终端提示或编辑器波浪线，找到问题代码所在的文件和行号。
分析错误原因：例如 ESLint 提示 Missing semicolon（缺少分号），或 Strings must use singlequote（字符串必须使用单引号）。
修改代码：在对应位置添加分号，或把双引号改为单引号。
验证修正结果：保存文件后，观察编辑器波浪线是否消失，或再次执行 npm run lint 确认错误已修复。
14.3 手动修正的优势与适用场景
优势：开发者可深入理解代码规范的细节，逐步养成规范编码的习惯。
适用场景：错误数量较少、需要针对性学习规范细节的场景；或团队对代码风格有特殊定制，自动修复可能不符合预期的场景。
十五、ESLint 自动修正代码规范错误
为提升效率，ESLint 支持自动修复（--fix 参数），可批量修正大部分可自动修复的规范错误（如缩进、分号、引号等）。
15.1 自动修正的触发方式
命令行自动修复：执行 npm run lint -- --fix（或 vue-cli-service lint --fix），ESLint 会自动修改项目中所有可修复的规范错误。
编辑器保存时自动修复：在 VS Code 的配置文件（.vscode/settings.json）中添加以下配置，实现 "保存文件时自动触发 ESLint 修复"：
json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
15.2 自动修复的适用范围
可自动修复：缩进错误、分号缺失、引号不统一、多余空格等风格类问题。
不可自动修复：语法逻辑错误（如变量未定义）、需要人工判断的设计问题（如函数命名不规范）等，仍需手动修正。
15.3 自动修复与手动修正的配合策略
先通过自动修复处理所有可批量修正的风格问题；
再针对剩余的手动错误（如逻辑错误、命名问题）进行人工修正；
这种 "自动 + 手动" 的组合，可大幅提升代码规范的落地效率。
十六、总结：Vue 路由与工程化的核心价值
通过对上述知识点的系统学习，我们可以清晰看到：
Vue 路由是单页应用的 "骨架"，从基础的导航、传参，到进阶的嵌套路由、组件缓存，其设计围绕 "用户体验（无刷新跳转）" 与 "开发效率（声明式、编程式导航）" 展开，掌握路由的各类用法是构建复杂 Vue 应用的基础。
工程化实践（ESLint 代码规范、VueCli 项目创建）是项目 "从能用到好用" 的关键，它保障了代码的可维护性、团队协作的一致性，以及项目的长期可迭代性。
在实际开发中，需将路由的灵活运用与工程化的严格落地相结合 ------ 用路由实现页面的优雅跳转与数据传递，用 ESLint 和 VueCli 保障代码质量与开发效率，最终构建出体验流畅、维护成本低的 Vue 前端应用。同时，要持续关注社区最佳实践（如 Vue Router 4 的新特性、ESLint 新规则），不断迭代自己的技术栈，以适应前端领域的快速发展。