前端面试题156（详解vue路由传参params和query的方式和区别）

在Vue.js应用中，Vue Router是用于管理应用程序的路由（URLs）的一个重要库。它允许用户在不同的视图之间导航而无需重新加载页面。Vue Router提供了两种主要的方式来传递路由参数：params和query。下面我会详细介绍这两种方式以及它们之间的区别，并提供示例代码。

1. params 参数

• 定义：params 是一种动态路由的参数传递方式，它通过定义带占位符的路由来接收参数。这些参数直接包含在URL的路径部分，看起来更像RESTful风格的URL。

• 使用场景：当你想要在URL中明确表示某些数据，并且这些数据对于页面内容是必需的时候，应该使用params。比如，一个用户详情页，URL中包含用户的ID。

• 传递参数：

  • 定义路由：在路由配置中，使用冒号（:）来声明参数。

  // router/index.js
  const routes = [
    {
      path: '/user/:userId', // userId 是一个params参数
      name: 'User',
      component: UserComponent
    }
  ];
  

  • 导航到页面：

    this.$router.push({ name: 'User', params: { userId: 1 } });
    

  • 接收参数：在目标组件中，通过this.$route.params来访问。

    // UserComponent.vue
    export default {
      created() {
        console.log(this.$route.params.userId); // 输出: 1
      }
    };
    

2. query 参数

• 定义：query 是URL中的查询字符串部分传递参数的方式。它不改变URL的路径结构，而是附加在URL后面，以?开始，多个参数之间用&分隔。

• 使用场景：当参数不是URL路径的一部分，或者参数是可选的、非必要的，或者你想传递更复杂的数据结构时，可以使用query。例如，搜索过滤条件、分页信息等。

• 传递参数：

  • 导航到页面：

    this.$router.push({ path: '/search', query: { keyword: 'Vue' } });
    

    这将生成URL如：/search?keyword=Vue。

  • 接收参数：同样在目标组件中，通过this.$route.query来访问。

    // SearchComponent.vue
    export default {
      created() {
        console.log(this.$route.query.keyword); // 输出: Vue
      }
    };
    

区别总结：

• URL结构：params使参数成为URL路径的一部分，看起来更整洁，符合REST风格；而query参数则作为查询字符串附加在URL后面，可能使URL看起来较长且不那么直观。

• 刷新与分享：使用params时，如果直接刷新页面或分享URL，如果没有正确的设置路由重定向或解析，可能会丢失参数信息，因为浏览器不会自动保留这些信息；而query参数在刷新或分享页面时会被保留。

• 适用场景：params适用于那些对页面内容至关重要的参数，且希望URL更加语义化的情况；query则更适合于传递可选的、辅助性质的参数，或者需要传递复杂对象的情况。

根据具体需求选择合适的参数传递方式，可以使你的Vue应用更加灵活和高效。