vue-router传参的四种方式超详细讲解

下面是“vue-router传参的四种方式超详细讲解”的完整攻略。

一、路径参数

路径参数是指在路由路径中使用“:xxx”的方式来表示一个参数，该参数为动态的，可以根据需要传入不同的值。使用路径参数可以方便地对同一组件进行不同样式或页面展示的切换，比如展示一组商品列表时选择不同的分类。

在定义路由时，只需将参数用“:”包围即可，如下所示：

{
    path: '/user/:id',
    component: User
}

这里的“:id”就是一个路径参数，可以使用$route.params.id来读取传入的参数值。

使用路径参数的示例代码如下：

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>我的ID是{{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'MyPage',
    };
  },
};
</script>

二、查询参数

查询参数是指在路由路径中使用“?xxx=xxx”的方式来表示一个参数，该参数为静态的，传入的值为固定的。查询参数的使用场景比路径参数更广泛，可以用于传递分页、排序、过滤等的参数。

查询参数在定义路由时可以不写，在具体使用时拼接在url后面即可，如下所示：

{
    path: '/user',
    component: User
}

读取查询参数值时可以使用$route.query.xxx来获取。

使用查询参数的示例代码如下：

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>我的name是{{ $route.query.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'MyPage',
    };
  },
};
</script>

三、命名路由

命名路由是指在定义路由时，给路由起一个名称，然后在跳转时通过名称来指定跳转到哪个路由。命名路由的好处在于代码中不用写具体的路由路径，只需要使用名称来进行跳转就可以了。

在定义路由时可以使用“name”字段进行命名：

{
    path: '/user/:id',
    name: 'user',
    component: User
},
{
    path: '/post/:id',
    name: 'post',
    component: Post
}

跳转时可以使用$router.push({name: 'user', params: {id: 123}})的方式进行跳转。

使用命名路由的示例代码如下：

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>我的ID是{{ $route.params.id }}</p>
    <button @click="jumpTo(567)">跳转到id为567的用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'MyPage',
    };
  },
  methods: {
    jumpTo(id) {
      this.$router.push({name: 'user', params: {id: id}});
    }
  }
};
</script>

四、props

props是指将参数作为组件的属性传入，这种方式可以实现更复杂的参数传递，可以将传入的参数进行处理，生成自己需要的数据结构。

在定义路由时需要设置props为true或者传入一个对象，对象中的属性就是组件的props。

{
    path: '/user/:id',
    component: User,
    props: true
}

在组件中需要设置props，才能使用传入的数据。

使用props的示例代码如下：

// 路由设置
{
    path: '/user/:id',
    component: User,
    props: route => ({ id: route.params.id })
}

// 组件代码
<template>
  <div>
    <h2>{{ name }}</h2>
    <p>我的ID是{{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      name: 'MyPage',
    };
  },
};
</script>

以上就是“vue-router传参的四种方式超详细讲解”的攻略。