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

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

article 2024/11/15 12:17:47

嘿，小伙伴们！今天给大家带来的是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>