【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> 组件来创建一个链接，用户点击链接时将触发路由跳转。这种方式在模板中定义导航链接，使得模板和导航逻辑更加清晰。
```

<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 中，刷新页面可能会导致参数丢失，需要额外的机制来保持状态。

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