Vue开发之路由传参

235人浏览 / 0人评论 / 添加收藏

先介绍一下命名路由。命名路由，顾名思义就是给路由路径起一个名字，我们导航到这个路由的时候就可以直接填写名字。

在路由参数中，name属性就是layout，这样的话，我们在导航跳转时就可以应用到name这个属性。

接下来，我们了解一下路由传参的几种方式。

onst routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
  },

导航时传递参数

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

const routes = [
  {
    path: '/search',
    name: 'search',
    component: Search,
  },
];

导航时查询参数

this.$router.push({ name: 'search', query: { q: 'vue', page: 1 } });

3、props传参

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true, // 将路由参数作为 props 传递
  },
];

在组件中直接使用

<template>
  <div>User ID: {{ id }}</div>
</template>

<script>
export default {
  props: ['id'],
};
</script>

通过定义动态路由来匹配不同路径。

const routes = [
  {
    path: '/product/:category/:id',
    name: 'product',
    component: Product,
  },
];

搜索