Vue路由传参方式详解

目录

• 路由路径参数
• 查询参数
• 动态路由
• 总结

路由路径参数

路由路径参数是通过在路由路径中定义占位符来传递参数。在Vue 3中，可以使用params来定义路由路径参数。下面是一个示例：

// 路由配置
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];

// 页面跳转
router.push({ name: 'User', params: { id: 123 } });

在上述示例中，我们定义了一个名为User的路由，并使用:id作为路径参数占位符。在页面跳转时，可以通过params传递参数，如{ id: 123 }。在目标页面中，可以使用$route.params来获取传递的参数值。

// 目标页面
export default {
  mounted() {
    console.log(this.$route.params.id); // 输出: 123
  }
}

查询参数

查询参数是通过在URL中使用?后面的键值对来传递参数。在Vue中，可以使用query来定义查询参数。下面是一个示例：

// 路由配置
const routes = [
  {
    path: '/user',
    name: 'User',
    component: UserComponent
  }
];

// 页面跳转
router.push({ name: 'User', query: { id: 123 } });

在上述示例中，我们定义了一个名为User的路由，并在页面跳转时使用query传递参数，如{ id: 123 }。在目标页面中，可以使用$route.query来获取传递的参数值。

// 目标页面
export default {
  mounted() {
    console.log(this.$route.query.id); // 输出: 123
  }
}

动态路由

动态路由是通过在路由配置中使用动态片段来传递参数。在Vue中，可以使用props来定义动态路由参数。下面是一个示例：

// 路由配置
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent,
    props: true
  }
];

// 页面跳转
router.push({ name: 'User', params: { id: 123 } });

在上述示例中，我们定义了一个名为User的路由，并使用:id作为动态路由参数。通过设置props: true，我们可以将动态路由参数作为组件的属性传递给目标页面组件。

// 目标页面
export default {
  props: ['id'],
  mounted() {
    console.log(this.id); // 输出: 123
  }
}

总结

本篇博客介绍了Vue中常见的路由传参方式，包括路由路径参数、查询参数和动态路由。通过使用这些传参方式，可以在不同的页面之间传递数据，实现更灵活和交互性的应用程序。

希望本篇博客对您理解Vue路由传参有所帮助。如果您有任何问题或疑问，请随时提问。