Vue基础教程（174）Vue Router之组件与Vue Router间解耦中的函数模式：别让你的Vue组件和路由“谈恋爱”！函数式解耦让你的代码秒变高冷贵族-优快云博客

一、为啥要“拆散”组件和路由？

想象一下这个场景：你的UserProfile组件里到处都是this.$route.params.userId——这就好比让一个高冷的组件天天追着路由问：“我现在在哪？用户ID是多少？” 这种“黏人”的代码不仅看着别扭，还会带来三大致命伤：

测试要造假：测试组件时还得伪造整个路由对象，麻烦得要命
复用变噩梦：想在其他地方复用这个组件？门都没有！
类型安全是路人：在TypeScript项目里，这种用法直接让类型检查崩溃

// 反面教材 - 组件跟路由“如胶似漆”
export default {
  mounted() {
    // 组件直接偷看路由的私密信息
    const userId = this.$route.params.userId
    this.fetchUser(userId)
  }
}

二、 Vue Router的“红娘”—函数模式

Vue Router早就看透了这个问题，默默提供了“函数模式”这个优雅的解决方案。简单说，就是让路由扮演“传话人”角色，把参数悄悄传递给组件，而不是让组件直接去打听。

基础玩法：布尔模式和对象模式

在深入函数模式前，我们先快速过一下另外两种姿势：

// 布尔模式 - 路由把params整个打包给组件
const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // 简单粗暴，全部传递
  }
]

// 对象模式 - 路由硬塞给组件一些固定礼物
const routes = [
  {
    path: '/user/:id',
    component: User,
    props: { theme: 'dark' } // 不管路径咋变，永远送这个
  }
]

但这两种都不够灵活，直到函数模式的出现...

三、函数模式：做个优雅的“传话人”

函数模式的精髓在于：路由变成了一位高情商的传话人，它能够根据当前情况，智能地决定告诉组件什么信息。

const routes = [
  {
    path: '/user/:userId',
    component: UserProfile,
    props: (route) => ({
      // 路由悄悄加工一下参数，再传给组件
      id: Number(route.params.userId), // 转成数字
      theme: route.query.darkMode ? 'dark' : 'light' // 根据查询参数决定
    })
  }
]

对应的组件就变得超级“高冷”：

<template>
  <div :class="`user-profile--${theme}`">
    <h1>用户 {{ id }} 的资料</h1>
  </div>
</template>
<script>
export default {
  // 组件：我才不关心数据从哪来的，爱给不给！
  props: ['id', 'theme'],
  mounted() {
    // 现在测试超简单，直接传props就行
    this.fetchUser(this.id)
  }
}
</script>

四、实战：给购物车筛选器“做手术”

来看个真实的例子——电商网站的购物车筛选功能：

手术前（耦合版）：

<template>
  <div>
    <h2>购物车</h2>
    <div>筛选：{{ $route.query.filter }}</div>
    <button @click="setFilter('onsale')">只看特价</button>
  </div>
</template>
<script>
export default {
  methods: {
    setFilter(filter) {
      // 组件直接修改路由，太越权了！
      this.$router.push({ query: { ...this.$route.query, filter } })
    }
  }
}
</script>

手术后（解耦版）：

// 路由配置
const routes = [
  {
    path: '/cart',
    component: ShoppingCart,
    props: (route) => ({
      // 路由负责解读所有查询参数
      filter: route.query.filter || 'all',
      sortBy: route.query.sortBy || 'default',
      onFilterChange: (newFilter) => {
        // 甚至把回调函数也传给组件！
        router.push({ 
          query: { ...route.query, filter: newFilter } 
        })
      }
    })
  }
]

<!-- 组件变得超级纯粹 -->
<template>
  <div>
    <h2>购物车</h2>
    <div>筛选：{{ filter }}</div>
    <button @click="onFilterChange('onsale')">只看特价</button>
  </div>
</template>
<script>
export default {
  props: ['filter', 'onFilterChange'],
  // 组件现在只关心业务，不关心路由细节
}
</script>

五、高级玩法：当函数模式遇上组合式API

在Vue 3的composition API中，函数模式更是如鱼得水：

import { defineComponent, ref, watch } from 'vue'

// 用组合式API创建高度可复用的组件
const useUserData = (userId) => {
  const user = ref(null)
  
  const fetchUser = async (id) => {
    user.value = await api.getUser(id)
  }
  
  watch(() => userId, fetchUser, { immediate: true })
  
  return { user }
}

// 路由配置
const routes = [{
  path: '/user/:id',
  component: defineComponent({
    props: {
      id: { type: Number, required: true }
    },
    setup(props) {
      // 组件内部完全不知道id是从路由来的
      const { user } = useUserData(props.id)
      return { user }
    }
  }),
  props: (route) => ({ id: Number(route.params.id) })
}]

六、真实项目中的坑与解决方案

坑1：路由变化时props不更新？

// 错误示范 - 对象引用没变
props: (route) => {
  const filters = { /* 一些计算 */ }
  return { filters } // 每次返回新对象，没问题！
}

坑2：异步操作怎么处理？

props: (route) => ({
  // 不要在这里做异步操作！
  // 正确的做法：传参数，让组件自己去请求
  userId: route.params.userId,
  
  // 如果需要预加载数据，用导航守卫
})

坑3：TypeScript类型安全

interface UserProps {
  id: number
  theme: 'light' | 'dark'
}

const routes: RouteRecordRaw[] = [{
  path: '/user/:id',
  component: UserProfile,
  props: (route): UserProps => ({
    id: Number(route.params.id),
    theme: (route.query.theme as string) || 'light'
  })
}]

七、完整示例：用户管理系统

下面是一个可直接运行的完整示例：

<!-- index.html -->
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
<script>
const { createApp, ref } = Vue
const { createRouter, createWebHistory } = VueRouter

// 用户详情组件 - 完全不知道路由的存在
const UserDetail = {
  props: ['userId', 'onBack'],
  template: `
    <div>
      <h2>用户详情</h2>
      <p>正在查看用户ID: {{ userId }}</p>
      <button @click="onBack">返回用户列表</button>
      <div v-if="loading">加载中...</div>
      <div v-else>
        <p>用户名: {{ userData.name }}</p>
        <p>邮箱: {{ userData.email }}</p>
      </div>
    </div>
  `,
  setup(props) {
    const loading = ref(true)
    const userData = ref({})
    
    // 模拟API调用
    const fetchUser = () => {
      loading.value = true
      setTimeout(() => {
        userData.value = {
          name: `用户${props.userId}`,
          email: `user${props.userId}@example.com`
        }
        loading.value = false
      }, 500)
    }
    
    fetchUser()
    
    return { loading, userData }
  }
}

// 用户列表组件
const UserList = {
  props: ['currentView', 'onViewUser'],
  template: `
    <div>
      <h2>用户列表</h2>
      <div v-for="id in [1,2,3]" :key="id">
        <button @click="onViewUser(id)">查看用户 {{ id }}</button>
      </div>
    </div>
  `
}

// 布局组件
const AppLayout = {
  props: ['currentView', 'userId', 'onBack', 'onViewUser'],
  template: `
    <div>
      <header>
        <h1>用户管理系统</h1>
      </header>
      <main>
        <UserList 
          v-if="currentView === 'list'"
          :on-view-user="onViewUser"
        />
        <UserDetail
          v-else
          :user-id="userId"
          :on-back="onBack"
        />
      </main>
    </div>
  `,
  components: { UserList, UserDetail }
}

// 路由配置
const routes = [{
  path: '/',
  component: AppLayout,
  props: (route) => ({
    currentView: route.name === 'user' ? 'detail' : 'list',
    userId: route.name === 'user' ? Number(route.params.id) : null,
    onBack: () => router.push('/'),
    onViewUser: (id) => router.push(`/user/${id}`)
  })
}, {
  path: '/user/:id',
  name: 'user', 
  component: AppLayout,
  props: (route) => ({
    currentView: 'detail',
    userId: Number(route.params.id),
    onBack: () => router.push('/'),
    onViewUser: (id) => router.push(`/user/${id}`)
  })
}]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp({}).use(router).mount('#app')
</script>