07 2025 档案
摘要：Vue 项目优化是一个系统性的工程，主要目标是提升 性能、可维护性、用户体验和打包效率。下面是 Vue 项目优化的全套解决方案，分为多个维度： 一、打包构建优化 技术点 优化方式 ✅ 代码分包 使用 Webpack 的 splitChunks，让第三方库、业务代码分离 ✅ 路由懒加载 compone
阅读全文
摘要：在 Vue（尤其是 Vue2）中使用插件的步骤主要包括以下 3 步： 一、引入插件（import / require） import MyPlugin from 'my-plugin' 如果是 UMD 格式的插件，也可以通过 <script src="..."> 方式引入。 二、使用 Vue.use
阅读全文
摘要：Vue 2.0 默认支持 IE9 及以上版本，但具体说明如下： Vue 2.x 的 IE 浏览器支持情况： 浏览器版本 支持情况 说明 IE9 ✅ 支持 需要 polyfill，不支持组件 v-model（表单绑定）在某些场景 IE10 ✅ 支持 基本兼容，建议至少用这个版本 IE11 ✅ 完整支持
阅读全文
摘要：在 Vue（包括 Vue 2 和 Vue 3）中，模板中的 HTML 注释默认不会被渲染到最终的 DOM 中，这是 Vue 编译器的行为。它会忽略掉模板中的 <!-- ... --> 注释，只渲染实际的 DOM 元素。 问题背景示例： <template> <div> <!-- 这是注释 --> <
阅读全文
摘要：Vue.js Template 编译流程简析 vue 模板并不是直接运行的 HTML，而是经过 编译器把模板字符串编译成渲染函数（render function），然后通过虚拟DOM（VNode）和响应式数据驱动视图更新。 1. 模板 (Template) <template> <div>{{ me
阅读全文
摘要：在 Vue 中实现动画非常方便，Vue 提供了专门的 <transition> 和 <transition-group> 组件，用于给元素或组件添加进入、离开、切换的过渡动画。 一、最基础的动画：使用 <transition> 实现显示/隐藏过渡 <template> <div> <button @
阅读全文
摘要：在 Vue 项目中，跨域问题一般出现在你前端代码请求后端接口时，例如： axios.get('http://api.example.com/data') 如果前后端不是同一个源（协议+域名+端口），就会触发浏览器的CORS（跨域资源共享）限制。 Vue 项目实现跨域的常见方法 Vue CLI 提供了
阅读全文
摘要：在 Vue Router 中，编程式导航是指通过 JavaScript 代码控制路由跳转，而不是使用 <router-link> 这样的声明式导航。 一、常用方法（基于 Vue Router 4） 编程式导航主要通过 router 实例提供的方法实现，常用的有以下几个： 1. router.push
阅读全文
摘要：以下是 Vue Router（适用于 Vue 2 和 Vue 3 中的大多数配置）中常用的路由配置项，以及它们的作用说明： 由配置项常用属性及说明 属性名 类型 说明 path String 路由路径，访问地址，例如 /login、/user/:id name String 路由名称，配合 this
阅读全文
摘要：Vue 的路由实现有两种主要模式：Hash 模式 和 History 模式，它们是通过 Vue Router 实现的。 一、Hash 模式（默认） URL 形式： http://example.com/#/home 特点： 使用 #（hash）符号后面的部分作为路由路径。 浏览器只会识别 # 前面的
阅读全文
摘要：active-class 是 Vue Router 提供的一个自定义激活 class 名的属性，它是 <router-link> 组件中的专用属性。 1. 属于哪个组件？ active-class 是 <router-link> 组件 的一个 prop。 2. 有什么用？ 当 <router-lin
阅读全文
摘要：$route vs $router 的区别 对象 说明 常用用途 $route 当前路由对象（"在哪里"） 获取路径、参数、查询、hash 等信息 $router 路由实例对象（"怎么走"） 进行页面跳转（push、replace 等） $route是状态，$router是行为。 $route（当前
阅读全文
摘要：这是一个很常见也很重要的问题！下面是 params 和 query 在 Vue Router（Vue 2 & 3 通用）中的区别详解： 区别如图 类型 示例 URL 获取方式 特点 params /user/123 this.$route.params.id 动态路径参数，必须配置在路由中 quer
阅读全文
摘要：在 Vue Router 中，动态路由是指在路径中使用变量（占位符）来匹配不同的页面或组件内容。 一、定义动态路由 在 Vue Router 配置中使用 : 定义动态参数，例如： // router/index.js import { createRouter, createWebHistory }
阅读全文
摘要：Vue Router 中有 三种主要的路由守卫（导航守卫），用于在路由跳转过程中进行拦截、校验或执行逻辑。 一、全局守卫（Global Guards） 1. beforeEach 在每次导航前触发。 可用于权限验证、登录状态检查等。 router.beforeEach((to, from, next
阅读全文
摘要：以vue2为例 一、安装 Vue Router npm install vue-router@3 二、项目结构（建议） src/ ├── views/ // 页面组件 │ ├── Home.vue │ └── About.vue ├── router/ │ └── index.js // 路由配置
阅读全文
摘要：在 Vue（尤其是 Vue 3 + Vue Router）中，路由跳转是实现页面切换的核心机制。Vue 路由跳转通常发生在单页应用（SPA）中，不会重新加载页面，而是通过 vue-router 实现视图组件的切换。 一、Vue 中路由跳转的方式 编程式导航（JavaScript 中使用 $route
阅读全文
摘要：Vue Router 是什么？ Vue Router 是 Vue.js 官方提供的前端路由管理库，用于构建单页应用（SPA, Single Page Application）时，实现页面之间的导航切换。 简单来说：Vue Router 就是让你“点击页面链接时，不刷新页面，也能切换不同的组件/视图”
阅读全文
摘要：Vuex 中的 Mutation 和 Action 都是用于修改状态（State）的机制，但它们有明显的区别，各自扮演不同角色 一张表快速看懂 Mutation vs Action： 对比项 Mutation Action 是否同步 只能是同步操作 支持异步（例如接口请求） 修改状态方式 直接修改
阅读全文
摘要：Vuex 的数据传递流程，简单来说就是： 组件通过 dispatch 触发 action，action 再调用 commit 去触发 mutation， mutation 修改 state 中的数据，组件再通过 state 或 getters 获取更新后的数据。 Vuex 数据传递完整流程图解： 组
阅读全文
浙公网安备 33010602011771号