当前位置：首页 > VUE

vue实现url的传递

2026-01-20 20:33:22VUE

使用路由参数传递

在Vue中可以通过路由参数实现URL传递。在路由配置中定义动态参数，例如：

// router.js
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

在组件中通过$route.params获取参数：

// User.vue
export default {
  created() {
    const userId = this.$route.params.id
  }
}

使用查询参数传递

通过router-link或编程式导航传递查询参数：

// 通过router-link
<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">Search</router-link>

// 编程式导航
this.$router.push({
  path: '/search',
  query: { keyword: 'vue' }
})

在目标组件中通过$route.query获取：

// Search.vue
export default {
  created() {
    const keyword = this.$route.query.keyword
  }
}

使用props接收路由参数

在路由配置中启用props，使路由参数作为props传递给组件：

// router.js
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true
  }
]

在组件中直接使用props接收：

// User.vue
export default {
  props: ['id'],
  created() {
    console.log(this.id)
  }
}

使用命名路由传递参数

定义命名路由时传递参数：

// router.js
const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

// 使用命名路由导航
this.$router.push({ name: 'user', params: { id: 123 } })

使用hash模式传递数据

在URL的hash部分传递数据：

// 设置hash
window.location.hash = 'section=about'

// 获取hash
const hash = window.location.hash.substring(1)
const params = new URLSearchParams(hash)
const section = params.get('section')

使用Vuex管理URL状态

结合Vuex存储和同步URL状态：

// store.js
const store = new Vuex.Store({
  state: {
    currentRouteParams: {}
  },
  mutations: {
    setRouteParams(state, params) {
      state.currentRouteParams = params
    }
  }
})

// 在组件中
this.$store.commit('setRouteParams', this.$route.params)

使用导航守卫处理URL参数

在全局或路由独享的守卫中处理URL参数：

// router.js
router.beforeEach((to, from, next) => {
  if (to.params.id) {
    // 处理参数逻辑
  }
  next()
})

使用URLSearchParams处理查询参数

现代浏览器提供的URLSearchParams API可以方便处理查询参数：

// 创建URLSearchParams对象
const params = new URLSearchParams(window.location.search)
const value = params.get('key')

// 添加参数
params.append('newKey', 'value')
window.history.replaceState({}, '', `${window.location.pathname}?${params}`)

vue实现url的传递