详解Vue 路由组件传参的 8 种方式

传参概述

在Vue中，路由传参是非常常见的需求，下面是详解Vue路由组件传参的8种方式。

方式一：params

通过动态路径参数进行传参，使用$route.params获取参数。

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

// 通过路由传参
router.push({ path: '/user/123' })

// 在 User 组件中获取参数
console.log(this.$route.params.id) // '123'

方式二：query

通过查询参数进行传参，使用$route.query获取参数。

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

// 通过路由传参
router.push({ path: '/user', query: { id: '123' } })

// 在 User 组件中获取参数
console.log(this.$route.query.id) // '123'

方式三：props

通过props进行传参，需要设置props: true，并使用props属性获取参数。

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

// 在 User 组件中获取参数
props: {
  id: {
    type: String,
    required: true
  }
}

方式四：元信息meta

通过路由元信息meta进行传参，在matched数组中获取参数。

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

// 在 User 组件中获取参数
console.log(this.$route.matched[0].meta.id) // '123'

方式五：url search参数

通过url search参数进行传参，在location.search中获取参数。

// 通过路由传参
router.push({ path: '/user?id=123' })

// 在 User 组件中获取参数
console.log(new URLSearchParams(this.$route.fullPath.split('?')[1]).get('id')) // '123'

方式六：全局状态管理器Vuex

通过Vuex进行传参，在this.$store.state.xxx中获取参数。

const store = new Vuex.Store({
  state: {
    id: '123'
  }
})

// 在 User 组件中获取参数
console.log(this.$store.state.id) // '123'

方式七：localStorage

通过localStorage进行传参，在localStorage.getItem('xxx')中获取参数。

// 通过路由传参
localStorage.setItem('id', '123')
router.push({ path: '/user' })

// 在 User 组件中获取参数
console.log(localStorage.getItem('id')) // '123'

方式八：sessionStorage

通过sessionStorage进行传参，在sessionStorage.getItem('xxx')中获取参数。

// 通过路由传参
sessionStorage.setItem('id', '123')
router.push({ path: '/user' })

// 在 User 组件中获取参数
console.log(sessionStorage.getItem('id')) // '123'

示例说明

下面是一个使用params方式传参的示例，用户点击列表时进入详情页面，详情页需要根据路由参数获取对应数据进行展示。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: UserDetail
    }
  ]
})

// 在用户列表组件中跳转传参
this.$router.push({ path: `/users/${user.id}` })

// 在用户详情组件中获取参数并进行数据展示
created () {
  // 获取路由参数
  const userId = this.$route.params.id
  // 根据userId获取对应的用户数据
  const user = getUserById(userId)
  // 展示数据
  this.user = user
}

下面是一个使用Vuex方式传参的示例，用户输入关键词后点击搜索按钮，搜索结果需要展示在列表页面上。

// Vuex配置
const store = new Vuex.Store({
  state: {
    keyword: ''
  },
  mutations: {
    setKeyword (state, keyword) {
      state.keyword = keyword
    }
  }
})

// 搜索组件代码片段
<template>
  <div>
    <input type="text" v-model="keyword">
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: ''
    }
  },
  methods: {
    search () {
      // 更新Vuex状态
      this.$store.commit('setKeyword', this.keyword)
      // 跳转路由
      this.$router.push('/list')
    }
  }
}
</script>

// 列表组件代码片段
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  computed: {
    keyword () {
      return this.$store.state.keyword
    },
    items () {
      // 根据keyword获取列表数据
      return getItemsByKeyword(this.keyword)
    }
  }
}
</script>

以上就是详解Vue路由组件传参的8种方式。