vue中路由怎么传值

百变鹏仔 4个月前 (09-25) #VUE

文章标签路由

vue 中路由传值

在 Vue 路由中，有以下几种方式可以实现传值：

1. Query 参数

在路由地址后面添加查询参数，以 ? 开始，参数以 key=value 形式串联。

/dashboard?user_id=123&amp;page=2

2. 路由参数

立即学习“前端免费学习笔记（深入）”；

在路由路径中定义参数占位符，并通过 params 对象访问。

// 路由路径/user/:id// 通过 params 对象获取参数this.$route.params.id

3. 路由 meta 数据

在路由配置中添加 meta 数据，可以通过 meta 对象访问。

// 路由配置{  path: '/user',  component: UserComponent,  meta: {    userId: 123  }}// 通过 meta 对象获取参数this.$route.meta.userId

4. 全局变量

在 Vue 实例或 Vuex 中定义全局变量，可以在任何路由组件中访问。

// 定义全局变量Vue.prototype.$userId = 123// 在路由组件中访问this.$userId

5. Vuex

通过 Vuex 状态管理器传递数据，Vuex 组件可以访问状态和提交变更。

// Vuex 状态state: {  userId: 123}// 在路由组件中访问this.$store.state.userId

文章推荐