大家好，我是小杨，一个干了6年前端的老兵。今天咱们聊聊Vue路由的模式问题，很多新手在配置路由时，往往对hash和history模式傻傻分不清楚，结果部署上线后各种404、页面刷新白屏，甚至SEO不友好。今天我就带大家彻底搞懂Vue路由的几种模式，让你在项目里游刃有余！

---

一、Vue路由的两种核心模式

Vue Router默认支持两种路由模式：

1. Hash模式（mode: 'hash'）
2. History模式（mode: 'history'）

此外，还有Memory模式（主要用于非浏览器环境，比如SSR或移动端），但今天我们主要讨论前两种。

---

二、Hash模式：带#号的URL

1. 特点

• URL里带#，比如 http://example.com/#/home
• 不依赖服务器配置，刷新不会404
• 兼容性好，IE9+都能跑

2. 原理

Hash模式利用的是浏览器的锚点（hash） 特性，#后面的变化不会触发页面刷新，但会触发hashchange事件，Vue Router监听这个事件来实现路由切换。

3. 适用场景

• 静态网站托管（GitHub Pages、Netlify等）
• 不想折腾服务器配置的情况
• 需要兼容老浏览器的项目

4. 代码示例

const router = new VueRouter({
  mode: 'hash', // 默认就是hash，可以不写
  routes: [...]
})

---

三、History模式：优雅的URL

1. 特点

• URL干净，比如 http://example.com/home
• 依赖服务器配置，否则刷新会404
• 需要后端支持（Nginx/Apache/Node.js等）

2. 原理

History模式利用HTML5的history.pushState和history.replaceStateAPI，让URL变化但不刷新页面，同时能记录浏览历史。

3. 适用场景

• 需要SEO友好的项目
• 企业级应用，追求专业URL风格
• 能控制服务器配置的情况

4. 代码示例

const router = new VueRouter({
  mode: 'history', // 使用history模式
  routes: [...]
})

5. 服务器配置（避免刷新404）

Nginx配置

location / {
  try_files $uri $uri/ /index.html; # 所有路径都回退到index.html
}

Node.js（Express）

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

---

四、Memory模式：无URL变化的路由

1. 特点

• URL不会变，完全由前端JS控制
• 适用于非浏览器环境（如React Native、Electron、SSR）
• 不会影响SEO，因为压根没有URL变化

2. 代码示例

const router = new VueRouter({
  mode: 'abstract', // Vue 2叫abstract，Vue 3叫memory
  routes: [...]
})

---

五、如何选择路由模式？

模式	适用场景	是否需要服务器配置	SEO友好	兼容性
Hash	静态托管、兼容老浏览器	❌ 不需要	❌ 不友好	IE9+
History	企业级应用、SEO优化	✅ 需要	✅ 友好	IE10+
Memory	非浏览器环境（SSR、Electron）	❌ 不需要	❌ 不适用	所有环境

我的经验总结

1. 个人博客/静态网站 → Hash模式（省事）
2. 企业后台/电商网站 → History模式（专业）
3. React Native/Electron → Memory模式（无URL需求）

---

六、常见坑点 & 解决方案

1. History模式刷新404？

• 原因：服务器没正确配置回退到index.html
• 解决：参考上面的Nginx/Node.js配置

2. Hash模式SEO差？

• 解决：用服务端渲染（SSR）或预渲染（Prerender）

3. 微信内置浏览器兼容性问题？

• 解决：强制使用Hash模式，避免微信的奇葩history兼容问题

---

七、总结

• Hash模式：简单省事，适合静态网站
• History模式：专业优雅，但需要服务器支持
• Memory模式：非浏览器环境专属

选对模式，能让你的项目少踩很多坑！如果你在项目里遇到过路由的奇葩问题，欢迎在评论区分享，我帮你分析~

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，一个做了6年前端的老司机。今天我们来聊聊路由守卫这个在前端开发中特别实用的功能，它能帮我们控制页面的跳转流程，就像给网站请了个尽职的保安。

一、什么是路由守卫？

简单说，路由守卫就是页面跳转时的"安检门"。比如：

• 用户没登录想进会员中心？拦住！
• 页面数据没保存就想离开？弹窗提醒！
• 普通员工想访问管理员页面？门都没有！

二、Vue路由的三大守卫钩子

1. 全局守卫 - 整个网站的保安队长

// 全局前置守卫（每次跳转前都会触发）
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !我.store.state.isLogin) {
    next('/login') // 去登录页
  } else {
    next() // 放行
  }
})

// 全局解析守卫（适合做权限校验）
router.beforeResolve(async to => {
  if (to.meta.requiresAdmin) {
    await 我.checkAdminRole() // 异步检查权限
  }
})

// 全局后置钩子（跳转完成后触发）
router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath) // 可以在这里做页面统计
})

2. 路由独享守卫 - 特定页面的专属安检

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (!我.store.state.userInfo.vip) {
        next('/upgrade') // 非VIP跳转到升级页
      } else {
        next()
      }
    }
  }
]

3. 组件内守卫 - 组件自己的小门卫

export default {
  beforeRouteEnter(to, from, next) {
    // 注意！这里还不能用this
    next(vm => {
      vm.initData() // 通过vm访问组件实例
    })
  },
  
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件被复用时触发
    this.fetchData(to.params.id)
    next()
  },
  
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      if (confirm('有未保存的修改，确定离开吗？')) {
        next()
      } else {
        next(false) // 取消导航
      }
    } else {
      next()
    }
  }
}

三、React路由守卫实现方案

React Router没有内置守卫，但我们可以自己实现：

1. 高阶组件方式

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        我.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  )
}

2. 自定义Hook方式

function useAuthGuard() {
  const history = useHistory()
  
  useEffect(() => {
    if (!我.store.getState().auth.isLogin) {
      history.replace('/login')
    }
  }, [history])
}

// 在需要守卫的组件中使用
function AdminPage() {
  useAuthGuard()
  return <div>管理员页面</div>
}

四、实战中的骚操作

1. 动态路由加载：在beforeEach中按需加载路由

router.beforeEach(async (to) => {
  if (to.meta.requiresAdmin && !我.hasAdminRoute) {
    await 我.loadAdminRoutes() // 动态添加路由
    return to.fullPath // 重定向到目标页
  }
})

2. 页面离开确认：

beforeRouteLeave(to, from, next) {
  window.onbeforeunload = () => "数据可能丢失！" // 浏览器原生提示
  // ...其他逻辑
}

3. 滚动行为控制：

router.afterEach((to) => {
  if (to.meta.scrollToTop) {
    window.scrollTo(0, 0)
  }
})

五、常见坑点指南

1. 死循环陷阱：

// 错误示范！会导致无限循环
router.beforeEach((to, from, next) => {
  if (!isLogin) next('/login')
})

// 正确做法
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path !== '/login') next('/login')
  else next()
})

2. 异步操作处理：

// 记得要调用next！
beforeRouteEnter(to, from, next) {
  fetchData().then(() => next()) // 别忘了next
}

3. meta字段妙用：

{
  path: '/admin',
  meta: {
    requiresAuth: true,
    requiredRole: 'admin'
  }
}

六、总结

路由守卫用得好，能帮我们实现：

• ✅ 登录状态验证
• ✅ 权限精细控制
• ✅ 数据变更提示
• ✅ 页面访问统计
• ✅ 动态路由加载

记住守卫钩子的执行顺序：全局beforeEach → 路由beforeEnter → 组件beforeRouteEnter → 全局beforeResolve → 全局afterEach

希望这篇能帮到大家！如果有问题欢迎在评论区交流，我会把6年踩过的坑都分享出来~

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，一个摸爬滚打6年的前端老油条。今天咱们来聊聊Vuex这个状态管理神器，尤其是怎么从Vuex里优雅地拿数据。相信不少刚接触Vuex的小伙伴都会有点懵，store里的数据到底怎么取？mapState、getters该怎么用？别急，看完这篇你就懂了！

1. 最基础的方式：this.$store

在Vue组件里，我们可以直接通过this.$store访问Vuex的store实例。比如：

export default {
  computed: {
    myData() {
      return this.$store.state.myModule.myData
    }
  }
}

这种方式简单直接，适合小型项目或者临时取数据。但项目大了以后，到处写this.$store.state.xxx会显得很啰嗦，而且难以维护。

2. 进阶玩法：mapState 解放双手

Vuex提供了mapState辅助函数，可以让我们更优雅地映射state到计算属性：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('myModule', {
      myData: state => state.myData,
      myList: 'list' // 字符串简写形式
    }),
    // 其他计算属性...
  }
}

这样代码更简洁，而且一目了然。mapState第一个参数是模块名（如果是模块化的话），第二个参数是映射规则。

3. 高级技巧：getters的妙用

有时候我们需要对state做一些计算或过滤，这时候getters就派上用场了：

// store定义
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习Vuex', done: true },
      { id: 2, text: '写博客', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

// 组件中使用
export default {
  computed: {
    ...mapGetters(['doneTodos']),
    // 或者带模块名的
    ...mapGetters('myModule', ['myGetter'])
  }
}

在组件模板中直接使用doneTodos就能获取到已完成的任务列表。

4. 模块化场景下的数据获取

当项目大了，Vuex通常会采用模块化组织。这时候拿数据要特别注意命名空间：

// 假设有个user模块
export default {
  computed: {
    ...mapState('user', {
      userName: 'name',
      userAge: 'age'
    }),
    ...mapGetters('user', ['isAdmin'])
  },
  methods: {
    ...mapActions('user', ['login'])
  }
}

5. 我的踩坑经验

记得我刚用Vuex时，经常犯的一个错误是直接在方法里修改state：

// ❌ 错误示范
methods: {
  updateData() {
    this.$store.state.myData = '新数据' // 这样改Vue是监听不到的！
  }
}

正确的做法是通过mutations来修改state：

// ✅ 正确做法
methods: {
  updateData() {
    this.$store.commit('UPDATE_DATA', '新数据')
  }
}

6. 小技巧：动态模块的数据获取

有时候我们需要动态注册模块，这时候获取数据要确保模块已经注册：

created() {
  // 动态注册模块
  this.$store.registerModule('dynamicModule', dynamicModule)
  
  // 获取数据
  const data = this.$store.state.dynamicModule.someData
}

总结

Vuex数据获取其实很简单，关键是要掌握几个核心API：

• 基础：this.$store.state.xxx
• 进阶：mapState, mapGetters
• 模块化：注意命名空间
• 修改数据：一定要通过mutations

记住，好的状态管理能让项目更易维护，代码更清晰。希望这篇能帮你少走弯路！

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，一个在Vue世界里摸爬滚打6年的老司机。今天要和大家聊聊Vuex这个"甜蜜的负担"——刚入门时觉得它像丈母娘的要求又多又烦，用顺手后发现简直是开发大型项目的救命稻草！

（温馨提示：本文附带咖啡店点单系统完整代码示例，文末自取~）

---

一、🌰 举个栗子：没有Vuex的日子有多苦？

去年我接了个咖啡店点餐系统的项目，刚开始想着："不就几个页面传数据嘛，用props和event足够了！"

结果代码写成这样：

// 父组件
<ChildA :order="order" @update="handleUpdate"/>
<ChildB :order="order" @update="handleUpdate"/>
<ChildC :order="order"/> 

// 子组件
this.$emit('update', newOrder)

三天后：

• 页面层级深到需要props穿越5层组件
• 兄弟组件通信要靠共同的祖爷爷组件中转
• 改个需求要翻遍十几个文件

我意识到——是时候请出Vuex这个救兵了！

---

二、🚀 Vuex四件套：咖啡店的中央管理系统

想象Vuex就是咖啡店的中央控制台：

1. State - 咖啡店库存表

state: {
  coffeeBeans: 100,  // 咖啡豆库存
  milk: 50,          // 牛奶库存
  currentOrder: null // 当前订单
}

2. Mutations - 唯一能改库存的人（店长）

mutations: {
  SET_ORDER(state, payload) {
    state.currentOrder = payload
  },
  USE_INGREDIENTS(state, {beans, milk}) {
    state.coffeeBeans -= beans
    state.milk -= milk
  }
}

3. Actions - 咖啡师的工作流程

actions: {
  async makeCoffee({ commit, state }, order) {
    if (state.coffeeBeans < 10) {
      我.alert('咖啡豆不足！')
      return
    }
    
    await 我.煮咖啡() // 模拟异步操作
    commit('USE_INGREDIENTS', { beans: 10, milk: 5 })
    commit('SET_ORDER', order)
  }
}

4. Getters - 今日特饮推荐

getters: {
  recommend: state => {
    return state.coffeeBeans > 50 
      ? '推荐手冲咖啡' 
      : '今日特价：美式咖啡'
  }
}

---

三、💻 在项目中如何食用？

1. 安装并注入Store

// store/index.js
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

// main.js
import store from './store'
new Vue({ store }).$mount('#app')

2. 组件中使用（三种姿势）

姿势一：直接调用（适合紧急情况）

this.$store.dispatch('makeCoffee', '拿铁')
const recommend = this.$store.getters.recommend

姿势二：map辅助函数（优雅永不过时）

import { mapActions, mapGetters } from 'vuex'

export default {
  methods: {
    ...mapActions(['makeCoffee'])
  },
  computed: {
    ...mapGetters(['recommend'])
  }
}

姿势三：Composition API（Vue3真香）

import { useStore } from 'vuex'

setup() {
  const store = useStore()
  const recommend = computed(() => store.getters.recommend)
  
  const orderCoffee = () => {
    store.dispatch('makeCoffee', '澳白')
  }
}

---

四、🚨 血泪教训：我踩过的那些坑

1. Mutation必须同步！
   有次我在mutation里调接口，导致devtools无法追踪状态变化...

2. Module的命名空间
   忘记加namespaced: true，导致action重名冲突：

   // 错误示范
   this.$store.dispatch('updateOrder') // 调用的是哪个模块的？
   
   // 正确姿势
   this.$store.dispatch('order/updateOrder')
   

3. Store太大怎么办？
   用模块化拆分，就像咖啡店分前厅和后厨：

   modules: {
     order: orderModule,  // 订单相关
     menu: menuModule,    // 菜单管理
     user: userModule     // 用户信息
   }
   

---

五、🌟 小杨的私藏最佳实践

1. 目录结构这样排

   store/
   ├── index.js        # 组装模块
   ├── actions.js      # 根级action
   ├── modules/
   │   ├── cart.js     # 购物车模块
   │   └── user.js     # 用户模块
   

2. 配合LocalStorage持久化

   // 用户登录后保存状态
   localStorage.setItem('user', JSON.stringify(state.user))
   
   // 初始化时读取
   state.user = JSON.parse(localStorage.getItem('user')) || {}
   

3. Vuex+TypeScript的正确姿势

   interface CoffeeState {
     beans: number
     milk: number
   }
   
   const state: CoffeeState = {
     beans: 100,
     milk: 50
   }
   

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，做了6年前端的老油条。今天咱们不聊虚的，就用奶茶店点单的栗子🌰，把Vuex的核心流程给你整得明明白白！（文末有【避坑指南】，新手必看！）

---

🧋 先看场景：没有Vuex的混乱世界

想象你在奶茶店：

• 你（组件）对店员说："要一杯珍珠奶茶"
• 你朋友（另一个组件）又说："不要珍珠了，改椰果"
• 结果店员懵了，两杯都做了...

这就是组件间直接传值的问题：数据混乱，难以追踪！

---

🚀 Vuex怎么解决问题？

Vuex就像奶茶店的中央订单系统：

// 1. 创建store（中央仓库）
const store = new Vuex.Store({
  state: { 
    order: "空" // 当前订单状态
  },
  mutations: {
    // 2. 唯一修改订单的方式（类似店员接单）
    SET_ORDER(state, payload) {
      state.order = payload;
    }
  },
  actions: {
    // 3. 处理异步操作（比如加料要等3分钟）
    async changeOrder({ commit }, newOrder) {
      await 我.等3分钟(); // 模拟异步
      commit('SET_ORDER', newOrder); 
    }
  },
  getters: {
    // 4. 计算属性（比如订单总价）
    orderWithPrice: state => `${state.order} | 价格：15元`
  }
})

工作流程四步走：

1️⃣ 你（组件）喊一嗓子：this.$store.dispatch('changeOrder', '芝士葡萄')
2️⃣ Action（店长）："等等，我先确认下库存..." → 调用commit('SET_ORDER')
3️⃣ Mutation（店员）：老老实实修改state.order
4️⃣ 所有组件（顾客）：自动收到新订单！

---

💡 为什么必须用Mutation改数据？

就像奶茶店规定：只有店员能改订单。如果让顾客自己乱改（直接修改state），迟早会出现"珍珠奶茶不要奶"的黑暗料理！

---

🚨 避坑指南（血泪经验）

1. 不要跳过Action直接Commit

   • ❌ 坏习惯：this.$store.commit('SET_ORDER')
   • ✅ 正确姿势：用Action处理业务逻辑

2. Module拆分技巧
   把大仓库拆成小仓库，就像奶茶店分点单区和制作区：

   const store = {
     modules: {
       order: orderModule, // 订单相关
       user: userModule   // 用户信息
     }
   }
   

3. Map辅助函数真香
   少写this.$store，更优雅：

   computed:  {
     ...mapGetters(['orderWithPrice']),
   },
   methods: {
     ...mapActions(['changeOrder']),
   }
   

---

🌟 小杨的总结

Vuex本质就是制定规则：

• State：唯一数据源（订单本）
• Mutation：唯一修改方式（店员权限）
• Action：处理脏活累活（店长调度）
• Getter：派生数据（订单小票）

下次写Vuex时，想想奶茶店怎么运作的，代码自然就溜了~ 如果还有疑问，评论区见，我请你喝（代码版）奶茶！

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，一个在前端圈摸爬滚打了6年的老司机。今天想和大家聊聊Vue项目性能优化的必杀技——懒加载。这玩意儿用好了，页面加载速度能快一倍不止，用户再也不抱怨"这网页怎么这么卡"了！

一、懒加载是啥？为啥要用？

想象一下你去餐厅吃饭，服务员一次性把所有菜都端上来，桌子都放不下，你看着也头疼。懒加载就像聪明的服务员，先上你马上要吃的，其他的等你要了再上。

在Vue里，懒加载主要用在两个地方：

1. 组件懒加载：路由切换时才加载对应组件
2. 图片懒加载：图片进入可视区域才加载

二、组件懒加载实战

以前我们是这样引入组件的：

import Home from './views/Home.vue'
import About from './views/About.vue'

这就像一口气把整本菜单背下来，多累啊！现在试试懒加载：

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

配合vue-router使用更香：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

效果：首次加载只下载当前页面的代码，其他页面等用户点了再加载。

三、图片懒加载实战

图片懒加载我推荐用vue-lazyload这个插件，用起来贼简单：

1. 先安装：

npm install vue-lazyload

2. 在main.js配置：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: require('./assets/error.png'), // 加载失败显示的图片
  loading: require('./assets/loading.gif'), // 加载中显示的图片
  attempt: 3 // 尝试加载次数
})

3. 把img标签的src换成v-lazy：

<!-- 以前 -->
<img src="我.jpg">

<!-- 现在 -->
<img v-lazy="我.jpg">

效果：页面滚动到图片位置时才加载，首屏加载速度直接起飞！

四、高级玩法：自定义懒加载指令

觉得插件太重？自己写个简单的图片懒加载也不难：

// main.js
Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

用的时候：

<img v-lazy="我.jpg">

五、性能对比实测

上周我做了个对比测试：

• 不用懒加载：首屏加载2.8MB，完全加载4.2MB
• 用了懒加载：首屏只要1.2MB，其他按需加载

效果立竿见影！

六、避坑指南

1. 别懒加载首屏内容：首屏该显示的东西要直接加载
2. 合理设置预加载：vue-lazyload的preLoad别设太大
3. 注意SEO影响：懒加载内容可能不被搜索引擎抓取
4. 提供加载状态：记得加loading动画，别让用户对着空白发呆

七、最后说两句

懒加载就像精明的管家，帮你把资源安排得明明白白。但记住两点：

1. 不是所有东西都适合懒加载
2. 懒加载不是性能优化的唯一手段

我见过有人把所有组件都懒加载，结果切换路由时疯狂转圈圈，这就本末倒置了。

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

大家好，我是小杨，一个摸爬滚打了6年的前端老司机。今天想和大家聊聊Vue插件那些事儿 - 这玩意儿用好了，真的能让你的开发效率蹭蹭往上涨！

一、Vue插件是个啥？

简单来说，Vue插件就像是你手机里的各种APP。Vue本身是个操作系统，而插件就是你在上面安装的各种功能扩展。比如你想做个图片懒加载，不用自己从头写，装个vue-lazyload插件就搞定了。

二、怎么安装插件？

安装插件简单得很，就跟npm装其他包一样。以vue-router为例：

npm install vue-router

然后在main.js里：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 告诉Vue你要用这个插件了
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]  // 你的路由配置
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三、自己写个插件试试？

有时候找不到合适的插件，或者项目有特殊需求，自己写一个也不难。来，我手把手教你写个简单的插件：

// my-plugin.js
const MyPlugin = {
  install(Vue, options) {
    // 1. 添加全局方法
    Vue.myGlobalMethod = function() {
      console.log('我是全局方法，哪里都能调！')
    }

    // 2. 添加全局指令
    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        el.style.color = binding.value || 'red'
      }
    })

    // 3. 添加实例方法
    Vue.prototype.$myMethod = function() {
      console.log('我是实例方法，组件里用this.$myMethod()调用')
    }
  }
}

export default MyPlugin

用的时候：

import MyPlugin from './my-plugin'
Vue.use(MyPlugin, { someOption: true })

四、几个超实用的插件推荐

1. vue-router：单页应用路由管理，必备！
2. vuex：状态管理，复杂应用离不开它
3. axios：HTTP请求库，比原生fetch好用
4. vuelidate：表单验证，省去一堆if else
5. vue-lazyload：图片懒加载，性能优化神器

五、使用插件的小技巧

1. 注意加载顺序：有些插件依赖其他插件，比如UI库可能依赖vue-router
2. 按需引入：像ElementUI这样的库支持按需引入，能减小打包体积
3. 注意版本兼容：Vue2和Vue3的插件可能不通用

六、举个实际例子

最近我在做一个后台管理系统，用了这些插件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueEcharts from 'vue-echarts'
import VueClipboard from 'vue-clipboard2'

Vue.use(ElementUI)
Vue.use(VueEcharts)
Vue.use(VueClipboard)

这样一下子就有了：

• 漂亮的UI组件(ElementUI)
• 强大的图表功能(VueEcharts)
• 复制到剪贴板功能(VueClipboard)

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！