vue路由传参的6种方式

Vue路由传参有以下6种方式：

• 路由路径参数（Route Params）：在路由定义中使用动态路径参数来传递参数；适合传递单个参数，参数必须在路由定义中提前声明；使用场景：传递单个参数，例如用户ID、商品ID等。例如，定义一个带有参数的路由：

// 路由定义
{
  path: '/user/:id',
  name: 'user',
  component: User
}
// 传递参数
this.$router.push({ name: 'user', params: { id: 123 } })
// 接收参数
this.$route.params.id

• 查询参数（Query Params）：
  在URL中使用查询字符串来传递参数。适合传递多个参数，参数较长时，URL可能会变得冗长；使用场景：传递多个参数，例如搜索条件、过滤条件。例如，定义一个带有查询参数的路由：

// 路由定义
{
  path: '/user',
  name: 'user',
  component: User
}
// 传递参数
this.$router.push({ name: 'user', query: { id: 123 } })
// 接收参数
this.$route.query.id

• 路由元信息（Route Meta）：
  在路由定义中使用元信息来传递参数；适合传递静态参数，使用场景：传递静态参数，例如页面标题、页面权限。例如，定义一个带有元信息的路由：

// 路由定义
{
  path: '/user',
  name: 'user',
  component: User,
  meta: {
    title: 'User Profile',
    requiresAuth: true
  }
}
// 获取参数
this.$route.meta.title

命名路由（Named Routes）：
在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。例如，定义一个带有命名路由的路由：

// 路由定义
{
  path: '/user',
  name: 'user',
  component: User
}
// 传递参数
this.$router.push({ name: 'user', params: { id: 123 } })
// 接收参数
this.$route.params.id

在组件中可以通过router.push({ name: 'user', params: { id: 123 } })

• Props传递参数：
  在路由定义中使用props属性来传递参数。例如，定义一个带有props的路由：

// 路由定义
{
  path: '/user',
  component: User,
  props: true
}

// 接收参数
props: ['id']

在组件中可以通过props来接收参数：props: ['id']

Vuex状态管理：
使用Vuex来管理应用程序的状态，并在不同组件之间共享参数。通过在Vuex store中定义和更新参数，然后在组件中使用mapState或mapGetters来获取参数的值。

// Vuex store定义
const store = new Vuex.Store({
  state: {
    userId: null
  },
  mutations: {
    setUserId(state, id) {
      state.userId = id
    }
  }
})
// 设置参数
store.commit('setUserId', 123)
// 获取参数
this.$store.state.userId

原文链接