当前位置：首页 > news >正文

Vue3 路由传参：玩转 params，让页面交互更流畅！

news 来源：原创 2024/9/27 23:34:09

嘿，小伙伴们！今天给大家带来的是Vue3中使用params进行路由传参的小技巧。不管是新手小白还是进阶玩家，这篇文章都会让你对Vue3的路由管理有更深的理解。废话不多说，直接进入实战演练！🎉

🔍 为什么要用`params`？

在前端开发中，页面间的跳转与数据传递是再常见不过的需求了。Vue Router 提供了多种方式来传递数据，其中params是最直接的一种。通过URL中的路径参数（path parameters），我们可以轻松地在页面间传递必要的数据，让用户体验更加流畅。

💻 实战案例：创建一个动态路由

假设我们正在开发一个博客应用，每个文章都有一个唯一的ID。我们需要实现点击文章标题后跳转到详情页，并展示对应的文章内容。

第一步：安装 Vue Router

如果还没有安装Vue Router，可以通过npm或yarn来安装：
```
npm install vue-router@4
# 或者
yarn add vue-router@4
```

第二步：配置路由

创建router.js文件，并配置我们的路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import ArticleDetail from './views/ArticleDetail.vue';const routes = [{ path: '/', component: Home },// 动态路由，通过 :id 来接收参数{ path: '/article/:id', component: ArticleDetail }
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

第三步：传递参数

在主页中，我们添加一个链接，点击后跳转到详情页，并传递文章ID：

<template><div><h1>Welcome to My Blog</h1><ul><li v-for="article in articles" :key="article.id"><!-- 使用 to 属性，并传入对象形式 --><router-link :to="{ name: 'article', params: { id: article.id } }">{{ article.title }}</router-link></li></ul></div>
</template><script>
export default {data() {return {articles: [{ id: 1, title: 'Vue3 入门指南' },{ id: 2, title: 'JavaScript ES6 新特性' },// 更多文章...];};},
};
</script>

第四步：接收参数

在ArticleDetail组件中，我们可以通过$route.params.id来获取传递过来的文章ID，并展示对应的文章内容：

<template><div><h2>{{ article.title }}</h2><p>{{ article.content }}</p></div>
</template><script>
export default {computed: {article() {const id = this.$route.params.id;// 假设我们有一个方法来获取文章数据return this.getArticleById(id);}},methods: {getArticleById(id) {// 这里可以调用API获取文章数据// 示例中直接返回一个静态文章if (id === '1') {return { id: 1, title: 'Vue3 入门指南', content: '欢迎来到Vue3的世界...' };}// 更多文章...}}
};
</script>