【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

1. Vue2 Router 路由基础

1.1 路由定义

路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。

• 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，{ path: '/user/:id', component: User } 表示当URL匹配到 /user/:id 时，将渲染 User 组件，其中 :id 是一个动态参数。
• 组件映射：每个路由模式都关联一个组件，当路由被激活时，对应的组件将被渲染。组件可以是一个普通的Vue组件，也可以是一个函数，用于按需加载组件。

1.2 路由跳转

路由跳转是SPA（单页面应用）中页面更新的核心机制。Vue Router提供了多种方法来实现路由跳转，包括编程式导航和声明式导航。

• 编程式导航：通过调用 router.push(location) 或 router.replace(location) 方法来实现路由跳转。这种方式可以在JavaScript代码中根据条件或用户交互来动态跳转路由。

  // 跳转到 /user/123
  router.push('/user/123');
  // 替换当前路由，不会留下历史记录
  router.replace('/user/123');
  

• 声明式导航：使用 <router-link> 组件来创建一个链接，用户点击链接时将触发路由跳转。这种方式在模板中定义导航链接，使得模板和导航逻辑更加清晰。

  <!-- 使用 to 属性指定目标路由 -->
  <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
  

在Vue2 Router中，路由跳转还可以携带参数，这些参数可以在目标组件中通过不同的方式获取。参数传递是Vue Router实现组件间通信的重要手段之一。

2. 路由传参方式

2.1 Query 参数传参

Query 参数传参是 Vue Router 中一种常用的传参方式，它允许开发者在路由跳转时通过 URL 的查询字符串（query string）传递数据。这种方式的优点是简单直观，参数值会直接显示在 URL 中，便于调试和分享。

• 基本使用：通过 router-link 的 to 属性或者 router.push() 方法的 query 选项来传递参数。

  // 使用 router-link 组件
  <router-link :to="{ name: 'search', query: { keyword: 'vue' }}">Search</router-link>
  
  // 编程式导航
  this.$router.push({ path: '/search', query: { keyword: 'vue' } });
  

• 组件中获取 Query 参数：在目标组件中，可以通过 this.$route.query 访问到传递的参数。

  created() {
    const { keyword } = this.$route.query;
    console.log(keyword); // 输出 'vue'
  }
  

• 响应 Query 参数变化：可以使用 watch 来监听 $route.query 的变化，从而响应参数的变化。

  watch: {
    '$route.query': function(newQuery, oldQuery) {
      // 根据新的 query 参数执行操作
    }
  }
  

2.2 Params 动态路由传参

Params 动态路由传参是另一种在 Vue Router 中传递参数的方式，适用于需要在路径中直接包含参数的情况。这种方式使得 URL 与资源的标识符直接关联，提高了 URL 的可读性。

• 基本使用：在路由配置中使用冒号 : 定义动态段，然后在跳转时通过 params 传递参数。

  // 路由配置
  const routes = [
    { path: '/user/:id', component: User }
  ];
  
  // 传递参数
  this.$router.push({ path: `/user/${userId}` });
  

• 组件中获取 Params 参数：在目标组件中，可以通过 this.$route.params 访问到传递的参数。

  created() {
    const { id } = this.$route.params;
    console.log(id); // 输出用户 ID
  }
  

• 响应 Params 参数变化：由于使用 Params 传参时组件可能会被复用，因此需要使用 beforeRouteUpdate 钩子来响应参数的变化。

  beforeRouteUpdate(to, from) {
    // 响应路由参数变化
    this.fetchUserData(to.params.id);
  }
  

• 避免组件重复使用问题：当使用 Params 传参时，如果直接通过 path 属性跳转，可能会导致 params 被忽略。正确的做法是使用路由的 name 或完整的带参数的路径。

  // 错误的用法
  this.$router.push({ path: '/user', params: { id: userId } }); // params 将被忽略
  
  // 正确的用法
  this.$router.push({ name: 'user', params: { id: userId } });
  

3. Query 参数传参详解

3.1 编程式导航传参

在 Vue 2 中，编程式导航通常使用 router.push 或 router.replace 方法来实现页面跳转，同时可以通过这些方法传递查询参数（query parameters）。查询参数以键值对的形式附加在 URL 的末尾，以 ? 开头，多个参数之间用 & 分隔。

// 假设有一个 Vue Router 实例 router
// 传递单个查询参数
router.push({ path: '/user', query: { name: 'John Doe' } });

// 传递多个查询参数
router.push({ path: '/search', query: { keyword: 'vue', page: 1 } });

在路由的组件中，可以通过 this.$route.query 访问到这些查询参数：

export default {
  created() {
    const { keyword, page } = this.$route.query;
    console.log(`Searching for ${keyword} on page ${page}`);
  }
};

3.2 声明式导航传参

声明式导航使用 <router-link> 组件来创建一个带有导航链接的 <a> 元素。通过 to 属性传递目标路由的路径和查询参数。

<!-- 在模板中传递单个查询参数 -->
<router-link :to="{ name: 'user', query: { name: 'John Doe' }}">User</router-link>

<!-- 在模板中传递多个查询参数 -->
<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 1 }}">Search</router-link>

与编程式导航类似，组件内部通过 this.$route.query 访问查询参数。这种方式使得 URL 的参数与组件解耦，提高了组件的可重用性和测试性。同时，声明式导航使得 URL 的结构在模板中清晰可见，有助于维护和理解代码。

4. Params 动态路由传参详解

4.1 动态路由配置

在Vue 2的Vue Router中，动态路由传参是一种常见的参数传递方式，它允许我们将参数嵌入到路由的路径中。这种方式适用于需要根据参数动态生成页面内容的场景。

• 路由定义：在路由配置中，我们使用冒号:来定义动态路由参数。例如，如果我们有一个用户详情页面，需要根据不同的用户ID来显示不同的用户信息，我们可以这样定义路由：

  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id', // 动态路由参数
        component: UserDetail
      }
    ]
  });
  

• 参数类型：动态路由参数可以是任何字符串，包括字母、数字、下划线等。但是，它们不能包含斜杠/，因为斜杠用于分隔不同的路由段。

• 可选参数：如果参数是可选的，可以在参数后面加上?。例如，如果我们想提供一个可选的查询参数来过滤用户信息，可以这样定义：

  {
    path: '/users/:page?',
    component: UserList
  }
  

• 路由匹配优先级：在定义了多个路由的情况下，Vue Router会根据定义的顺序来匹配路由。如果有多个路由规则匹配同一个路径，Vue Router会使用排在前面的路由。

4.2 组件内参数获取

在组件内部，我们可以通过this.$route.params来访问动态路由传递的参数。

• 访问参数：在组件的任何生命周期钩子或方法中，我们可以使用this.$route.params来获取路由参数。例如，在UserDetail组件中，我们可以这样获取用户ID：

  created() {
    const userId = this.$route.params.id;
    // 使用userId获取用户详情
  }
  

• 组件属性模式：Vue Router允许我们将路由参数作为组件的props传递。这可以通过在路由配置中设置props: true来实现，从而使得组件的props直接接收路由参数：

  {
    path: '/user/:id',
    component: UserDetail,
    props: true
  }
  

  然后在UserDetail组件中，我们可以直接使用id prop：

  export default {
    props: ['id']
  };
  

• 命名视图和子组件：对于包含命名视图的路由，我们需要为每个命名视图单独配置props选项。对于子组件，我们可以通过this.$children来访问它们，并手动传递参数。

• 参数变化响应：当路由参数发生变化时，Vue Router会自动响应这些变化，并重新渲染组件。这意味着我们可以依赖于Vue的响应式系统来更新UI。

• 编程式导航：除了在路由定义中使用动态参数外，我们还可以通过编程式导航来动态地改变路由参数。使用router.push或router.replace方法，并传递一个包含params的对象，可以实现导航到带有动态参数的路由：

  this.$router.push({ name: 'user', params: { id: 123 } });
  

通过上述方式，Vue 2的Vue Router提供了灵活的动态路由传参机制，使得我们可以构建基于参数的动态页面，满足不同的业务需求。

5. 路由传参的应用场景

5.1 列表过滤

在Vue 2的单页面应用中，路由传参在列表过滤功能中扮演着重要角色。通过URL传递查询参数，用户可以对列表进行动态筛选。例如，在电商平台的商品列表页面，用户可以根据品牌、价格区间或评分等条件进行筛选。

• 查询参数的构建与解析：利用query参数，开发者可以在路由跳转时通过编程式导航this.$router.push或声明式链接<router-link>传递筛选条件。在目标组件中，通过this.$route.query获取传递的参数，并应用这些参数进行数据的过滤和展示。

• 动态组件的复用：通过将筛选参数作为查询参数传递，相同的组件可以根据不同的查询参数渲染不同的列表视图，从而提高组件的复用性。

• SEO优化：由于查询参数会显示在URL中，这有助于搜索引擎优化（SEO），使得页面可以针对特定的搜索词被更好地索引。

5.2 详情页数据展示

路由传参在详情页的数据展示中也非常关键，它允许从导航链接中直接传递特定的数据标识符，如用户ID或产品ID。

• 直接传递标识符：在详情页路由配置中使用:id这样的动态路由参数，可以在跳转时直接通过URL传递数据标识符，如/users/123。

• 组件内部获取参数：目标组件通过this.$route.params或Composition API中的useRoute()来访问传递的参数，并根据这些参数请求和展示相应的详情数据。

• 提高用户体验：使用路由传参可以确保用户在刷新页面或直接访问详情页URL时，应用能够正确地请求和显示对应的详情数据，从而提供无缝的用户体验。

• 数据加载状态管理：在详情页组件中，可以使用Vue的响应式系统或状态管理库如Vuex来管理数据的加载状态，确保在数据请求过程中给用户适当的反馈。

6. 路由传参的高级技巧

6.1 命名视图传参

在Vue Router中，使用命名视图可以创建具有多个组件的路由，这些组件可以共享相同的路径但是有不同的视图。在这种情况下，传参给命名视图的子组件需要特别注意。

• 命名视图配置：首先，需要在路由配置中定义命名视图，并为每个子组件指定是否接收路由参数作为props。

  const routes = [
    {
      path: '/user/:id',
      name: 'user',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true, // User组件接收路由参数
        sidebar: false // Sidebar组件不接收路由参数
      }
    }
  ];
  

• 导航至命名视图：在导航至命名视图时，可以通过编程式导航或<router-link>组件传递参数。

  // 编程式导航
  this.$router.push({ name: 'user', params: { id: '123' } });
  
  // 使用<router-link>组件
  <router-link :to="{ name: 'user', params: { id: '123' } }">User</router-link>
  

• 在组件中接收参数：在命名视图中的组件可以通过props接收到路由参数。

  export default {
    props: ['id'],
    template: `<div>User {{ id }}</div>`
  };
  

6.2 导航守卫中使用传参

导航守卫是Vue Router中的一个重要特性，可以在路由跳转前后执行代码。在导航守卫中使用传参可以对路由跳转进行更细粒度的控制。

• 全局导航守卫：可以在路由配置的beforeEach钩子中使用传参，对所有路由跳转进行拦截。

  router.beforeEach((to, from, next) => {
    if (to.params.id) {
      // 执行一些操作，例如数据获取
      next(); // 继续跳转
    } else {
      next('/error'); // 重定向到错误页面
    }
  });
  

• 组件内的导航守卫：在路由组件内部，可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave钩子来访问传参。

  export default {
    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不能访问组件实例，因为当守卫执行前，组件实例还没被创建
      next(vm => {
        // 通过 `vm` 访问组件实例
      });
    },
    beforeRouteUpdate (to, from, next) {
      // 当路由发生变化，但是该组件被复用时调用
      // 比如导航守卫跳转时，会用到这个守卫
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  };
  

• 使用watch或计算属性：在组件内部，可以使用watch或计算属性来响应路由参数的变化。

  watch: {
    '$route' (to, from) {
      // 对路由变化做出响应
    }
  },
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
  

通过这些高级技巧，可以更灵活地在Vue Router中使用路由传参，实现复杂的路由逻辑和组件间的数据传递。

7. 路由传参的注意事项

7.1 避免直接依赖 $route

在组件中直接使用 $route 会增加组件与路由的耦合度，限制了组件的可重用性。应尽可能使用 props 配置来传递路由参数，从而提高组件的灵活性和可测试性。

7.2 命名视图的 props 配置

对于包含命名视图的路由，需要为每个命名的子组件单独配置 props。这样可以确保每个子组件都能接收到正确的参数。

7.3 静态和动态 props

当 props 配置为一个对象时，该对象将直接作为组件的 props 传入，适用于传递静态数据。而当 props 配置为一个函数时，可以动态地根据路由变化生成 props，适用于需要根据路由参数进行计算的场景。

7.4 监听路由变化

在使用参数化路由时，由于组件实例可能被复用，因此组件的生命周期钩子可能不会触发。需要使用 watch 或导航守卫如 beforeRouteUpdate 来监听路由参数的变化，并作出相应处理。

7.5 传递复杂对象

如果需要传递复杂的对象作为参数，可以考虑使用 props 函数模式，将对象序列化为查询参数（query string）并传递，然后在组件内部进行解析。

7.6 避免使用 v-slot 传递 props

通过 <router-view> 的 v-slot 传递 props 会使所有子组件都接收到该 props，这通常不是一个好的实践，因为它强制所有组件都声明了可能不需要的 props。

7.7 考虑使用全局状态管理

对于跨组件的传参，如果参数在多个组件间共享，可以考虑使用 Vuex 或其他全局状态管理库来管理这些参数，而不是依赖于路由传参。

7.8 注意参数的类型和验证

在定义 props 时，应该指定参数的类型，并在组件内部进行必要的验证和处理，以确保数据的正确性和组件的健壮性。

7.9 考虑使用 params 还是 query

根据参数的使用场景选择合适的传参方式。params 适用于动态路由参数，而 query 更适用于非动态的查询参数，它们在 URL 中的表现也不同。

7.10 刷新页面时参数的保持

使用 query 传参时，参数会显示在 URL 中，刷新页面时参数不会丢失。而 params 则不会显示在 URL 中，刷新页面可能会导致参数丢失，需要额外的机制来保持状态。

如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。