Vue.js Router Link: 跳转与传递参数的利器
2023-12-28 14:20:01
利用 router-link 轻松实现单页应用路由跳转
在单页应用中，路由是至关重要的，它负责页面之间的导航。在 Vue Router 中，router-link 组件是实现路由跳转的利器，它提供了简单且灵活的方式在不同页面之间切换。本文将深入探讨 router-link 的用法，涵盖其基本用法、参数传递方式，并以常见问题解答的形式解决常见疑虑。
router-link 基本用法
要使用 router-link，首先需要在 Vue Router 的路由配置中定义目标路由。路由配置是一个对象数组，其中每个对象代表一个路由条目，包括路径、组件、名称等属性。例如：
const routes = [
{
path: '/destination',
name: 'destination',
component: Destination
}
];
在 Vue 组件中，使用 router-link 组件跳转到目标路由非常简单，只需要在标签中指定 to 属性，其值为目标路由的名称或路径即可。
<router-link to="destination">跳转到目标路由</router-link>
点击此链接后，浏览器将跳转到 /destination 路由，并加载 Destination 组件。
router-link 参数传递
除了基本跳转外，router-link 还支持参数传递，这在动态路由场景中非常有用。参数传递有两种方式：
1. Query 参数传递
query 参数传递是最常见的方式，通过在 router-link 的 to 属性中使用 ? 符号将参数附加到 URL 后面。参数的格式为 key=value，多个参数可以用 & 符号连接。例如：
<router-link to="/destination?id=123">跳转到目标路由，并传递参数</router-link>
点击此链接后，浏览器将跳转到 /destination?id=123 路由，目标组件可以通过 $route.query 对象访问参数。
// 在目标组件中
export default {
computed: {
id() {
return this.$route.query.id;
}
}
};
2. Props 参数传递
props 参数传递是另一种参数传递方式，在 router-link 的 to 属性中使用 props 属性传递参数。props 的格式为一个对象，其中键是参数名，值是参数值。例如：
<router-link :to="{ name: 'destination', params: { id: 123 } }">跳转到目标路由，并传递参数</router-link>
点击此链接后，浏览器将跳转到 /destination/123 路由，目标组件可以通过 $route.params 对象访问参数。
// 在目标组件中
export default {
computed: {
id() {
return this.$route.params.id;
}
}
};
router-link 进阶用法
除了基本用法外，router-link 还提供了一些进阶用法，例如：
- 命名路由： 使用名称而不是路径作为
to属性的值，简化路由定义。 - 相对路由： 使用
.或..来表示相对当前路由的路径。 - 外部链接： 使用
target="_blank"属性将链接打开到新窗口。 - 自定义类名： 使用
class属性添加自定义类名到 router-link 元素。
常见问题解答
1. 如何在 router-link 中传递数组作为参数？
使用 query 参数传递，使用 JSON.stringify() 将数组转换为字符串。
2. 如何防止 router-link 触发浏览器后退按钮？
使用 event.preventDefault() 方法阻止事件的默认行为。
3. 如何在 router-link 中禁用导航？
设置 disabled 属性为 true。
4. 如何获取当前激活的路由？
使用 this.$route 访问当前激活的路由对象。
5. 如何监听路由变化？
使用 $router.beforeEach() 钩子在每次路由变化时执行代码。
结论
router-link 是 Vue Router 中一个功能强大的组件，它提供了简单且灵活的方式在单页应用中实现路由跳转和参数传递。掌握了 router-link 的用法，可以大大提高单页应用的开发效率和用户体验。
