玩转 Vue 路由传参，轻松构建动态路由系统
2023-02-17 04:42:10
解锁 Vue 路由传参，让你的路由系统更强大
内容简介：
在 Vue.js 的单页面应用中，路由系统扮演着举足轻重的角色。而 Vue 路由传参则是路由系统中的核心功能，它允许你在页面跳转时携带数据，实现数据在不同页面之间的传递，从而构建出更加动态、更加灵活的路由系统。
正片：
Vue 路由传参的三大招：
Vue 路由提供了三种传参方式：params 传参、query 传参以及在 url 中显示和不显示参数。这三种方式各有千秋，适用于不同的场景，掌握它们能够让你在构建路由系统时游刃有余。
1. params 传参：简单高效，传递数据不留痕迹
params 传参是 Vue 路由中最为简单的一种传参方式。它通过在路由路径中定义参数，并在组件中使用 $route.params 对象来获取参数值。这种方式简单易用，参数值也不会显示在 url 中，非常适合传递敏感数据或需要保密的数据。
代码示例：
// 定义路由
const routes = [
{
path: '/user/:id',
component: User,
},
];
// 获取参数
const id = this.$route.params.id;
2. query 传参：灵活多变，参数值一目了然
query 传参与 params 传参类似，不同的是，query 传参的参数值会显示在 url 中，以 ? 开头，参数名和参数值之间用 = 连接，多个参数之间用 & 连接。这种方式的好处是参数值一目了然，方便调试，缺点是参数值可能会被搜索引擎抓取，不适合传递敏感数据。
代码示例：
// 跳转路由
this.$router.push({
path: '/user',
query: {
id: 1,
name: 'John Doe',
},
});
// 获取参数
const id = this.$route.query.id;
const name = this.$route.query.name;
3. url 参数显示与隐藏：灵活控制，满足不同需求
在 Vue 路由中，你可以通过设置 hash 或 history 模式来控制 url 参数的显示与隐藏。hash 模式下，参数值会显示在 url 的 hash 部分，而 history 模式下，参数值不会显示在 url 中。你可以根据自己的需要选择合适的模式来控制 url 参数的显示与隐藏。
代码示例：
// 创建路由实例
const router = new VueRouter({
mode: 'history', // 使用 history 模式
routes,
});
Vue 路由传参的适用场景：在父路由与子路由之间传递数据
Vue 路由传参最常见的场景是在父路由跳转到子路由时，携带参数跳转。这种场景下，你可以使用 params 传参或 query 传参的方式来传递数据，将父路由中的数据传递到子路由中，从而实现数据在不同页面之间的共享。
代码示例：
// 父路由
<template>
<button @click="goToUser(user)">跳转到用户详情</button>
</template>
<script>
export default {
methods: {
goToUser(user) {
this.$router.push({
path: '/user/:id',
params: { id: user.id },
});
},
},
};
</script>
// 子路由
<template>
<p>用户 ID：{{ $route.params.id }}</p>
</template>
<script>
export default {
mounted() {
console.log(`用户 ID：${this.$route.params.id}`);
},
};
</script>
结论：
Vue 路由传参是构建动态路由系统的重要一环，掌握它能够让你在构建路由系统时更加灵活，更加得心应手。无论是简单的 params 传参，还是灵活的 query 传参，或者是 url 参数的显示与隐藏，都能够满足你不同的需求。掌握 Vue 路由传参，让你的路由系统更加强大，为你的应用带来更加流畅、更加无缝的浏览体验。
常见问题解答：
-
如何获取路由参数？
- params 传参：使用
$route.params对象。 - query 传参：使用
$route.query对象。
- params 传参：使用
-
如何设置 url 参数的显示与隐藏？
- 设置
hash模式：url 参数会显示在 hash 部分。 - 设置
history模式：url 参数不会显示在 url 中。
- 设置
-
params 传参和 query 传参的区别是什么？
- params 传参的参数值不会显示在 url 中，query 传参的参数值会显示在 url 中。
-
params 传参和 query 传参哪种更适合传递敏感数据？
- params 传参更适合传递敏感数据，因为它不会显示在 url 中。
-
如何传递对象或数组作为路由参数？
- 可以使用
JSON.stringify()方法将对象或数组转换为字符串，然后再作为参数传递。
- 可以使用
