Vue路由传参详细介绍

让我们来详细讲解 “Vue路由传参详细介绍”的完整攻略。

Vue路由传参的方式

Vue Router 提供了多种传参的方式：

1. 动态路由传参
2. 查询参数传参
3. props传参

这三种方式各有优缺点，下面我们逐个介绍。

1. 动态路由传参

动态路由传参是通过路由配置中的参数来传递数据的方式。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

上述代码中，/user/:id中的:id表示动态参数，其中id是参数名称。通过这种方式路由跳转时可以携带参数：

// 假设传入的参数值为userId
this.$router.push({ name: 'user', params: { id: userId } })

在下一个页面中可以通过$route.params获取参数：

this.$route.params.id // 获取动态参数id的值

2. 查询参数传参

查询参数传参是通过url中的查询参数来传递数据的方式。例如，访问http://example.com/user?id=userId：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: User
    }
  ]
})

上述代码中，只需要在路由中定义path:'/user'就可以接收到查询参数中的所有参数，可以通过$route.query获取参数：

this.$route.query.id // 获取查询参数id的值

3. props传参

props传参是将组件实例的props属性与路由属性绑定，通过这种方式可以更直观地在组件中使用传递的属性。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      props: true
    }
  ]
})

上述代码中，通过props: true将路由参数直接配置到组件的props中：

export default {
  props: ['id']
}

在组件中可以直接使用props属性进行数据渲染。

示例说明

下面我们通过两个例子来说明上述三种传参方式的具体用法。

例子一：动态路由传参

假设我们有一个资讯列表页，点击列表页中的某一项跳转到资讯详情页面，需要将相应的资讯id传递到详情页面。这种情况下，动态路由传参是最好的选择。

资讯列表路由定义：

const router = new VueRouter({
  routes: [
    {
      path: '/news',
      name: 'news',
      component: NewsList
    },
    {
      path: '/news/:id',
      name: 'newsDetail',
      component: NewsDetail
    }
  ]
})

在资讯列表页面使用<router-link>跳转到资讯详情页时，携带资讯id的参数：

<router-link :to="{ name: 'newsDetail', params: { id: item.id } }">{{item.title}}</router-link>

在资讯详情页面中获取路由参数：

export default {
  created() {
    console.log(this.$route.params.id) // 输出路由参数id的值
  }
}

例子二：props传参

假设我们有一个商品列表页，需要将商品列表数据传递到商品详情页面。这种情况下，props传参是最好的选择。

商品列表路由定义：

const router = new VueRouter({
  routes: [
    {
      path: '/goods',
      name: 'goods',
      component: GoodsList
    },
    {
      path: '/goods/:id',
      name: 'goodsDetail',
      component: GoodsDetail,
      props: true
    }
  ]
})

在商品列表页面使用<router-link>跳转到商品详情页时，携带商品列表数据的参数：

<router-link :to="{ name: 'goodsDetail', props: { id: item.id, data: item } }">{{item.title}}</router-link>

在商品详情页面中使用props传参：

export default {
  props: ['id', 'data']
}

在组件中直接使用props进行数据渲染即可。

以上就是Vue路由传参的详细介绍，希望能够对您理解和使用Vue路由传参有所帮助。