参数传递

学习完整课程请移步 互联网 Java 全栈工程师

本节视频

• 【视频】Vue 渐进式 JavaScript 框架-VueRouter-参数传递

概述

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；

使用路径匹配的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

说明：主要是在 path 属性中增加了 :id 这样的占位符

传递参数

router-link

个人信息

说明：此时我们将 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

代码方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

接收参数

在目标组件中使用

{{ $route.params.id }}

来接收参数

使用 props 的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

说明：主要增加了 props: true 属性

传递参数

同上

接收参数

为目标组件增加 props 属性，代码如下：

  export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

接收参数