vue-router传递参数的几种方式实例详解

vue-router传递参数分为两大类，一类是编程式的导航 router.push另一类是声明式的导航 <router>，本文通过实例代码给大家介绍vue-router传递参数的几种方式，感兴趣的朋友跟随小编一起看看吧 Vue Router 是 Vue.js 应用中的核心组件，用于管理应用的路由。在 Vue Router 中，传递参数主要有两种方式：编程式导航（通过 `router.push`）和声明式导航（使用 `<router-link>`）。下面我们将详细讲解这两种方式以及它们的子类别。 ### 一、编程式导航 #### 1. 字符串方式 这是最简单的导航方式，通过字符串直接指定要跳转的路由路径，但不支持传递参数： ```javascript this.$router.push("home"); ``` #### 2. 对象方式 对象方式可以传递参数，分为两种类型：命名路由和查询参数。 **（a）命名路由** 你需要在定义路由时为每个路由设置一个名称： ```javascript { path: '/news/:userId', name: 'news', component: NewsComponent } ``` 然后，你可以使用 `params` 参数进行传递： ```javascript this.$router.push({ name: 'news', params: { userId: 123 }}); ``` 接收参数时，使用 `this.$route.params.userId`： ```html <div> This is the news page. The transformed param is {{ this.$route.params.userId }} </div> ``` **（b）查询参数** 查询参数是以 URL 查询字符串的形式传递，如 `/news?userId=123`。需要使用 `query` 参数： ```javascript this.$router.push({ path: '/news', query: { userId: 123}}); ``` 接收参数时，使用 `this.$route.query.userId`： ```html <div> This is the news page. The transformed param is {{ this.$route.query.userId }} </div> ``` ### 二、声明式导航 声明式导航使用 `<router-link>` 组件，它会生成一个 HTML 链接，点击时会触发相应的路由跳转。同样，也有字符串和命名路由两种方式。 #### 1. 字符串方式 ```html <router-link to="news">Click to news page</router-link> ``` #### 2. 命名路由 ```html <router-link :to="{ name: 'news', params: { userId: 1111 }}">Click to news page</router-link> ``` #### 3. 查询参数 ```html <router-link :to="{ path: '/news', query: { userId: 1111 }}">Click to news page</router-link> ``` 当使用 `<router-link>` 时，传递的参数会在点击后自动添加到 URL 中，无需手动处理。 需要注意的是，通过 `params` 传递的参数在页面刷新后会丢失，因为它们不会被包含在 URL 中。而 `query` 参数则会被保留在 URL 中，即使页面刷新，也可以通过 `this.$route.query` 获取。 总结，Vue Router 的参数传递提供了丰富的灵活性，无论是在编程式导航还是声明式导航中，都可以根据需求选择合适的参数传递方式。正确理解和运用这些方法，将有助于构建更加高效和可维护的 Vue 应用。