请举例vue-router中的params传参和query传参

1. params传参：

在路由配置中定义路由参数，例如：

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

在组件中通过$route对象获取路由参数，例如：

<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
  </div>
</template>

2. query传参：

在路由配置中定义query参数，例如：

const routes = [
  {
    path: '/user',
    component: User,
    props: (route) => ({ id: route.query.id })
  }
]

在组件中通过props接收路由参数，例如：

<template>
  <div>
    <h2>User {{ id }}</h2>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

在路由跳转时使用query传参，例如：

<router-link :to="{ path: '/user', query: { id: '123' } }">User</router-link>

相关问题

vue-Router 删除params 传参的数据

要删除 Vue Router 中的 `params` 传参的数据，可以使用 `$router.push` 方法来重新导航到当前路由，并将 `params` 对象设置为空对象，从而清除已经传递的参数。具体实现可以参考以下代码示例：

// 在当前路由中清除 params 传参的数据
this.$router.push({
  name: this.$route.name,
  params: {}
})

这里的 `name` 是当前路由的名称，可以通过 `$route.name` 获取。通过将 `params` 设置为空对象，就可以清除已经传递的参数。

另外，如果您想要删除所有的路由参数（包括 `params` 和 `query`），可以使用以下代码：

// 在当前路由中清除所有的参数
this.$router.push({
  path: this.$route.path,
})

这里的 `path` 是当前路由的路径，可以通过 `$route.path` 获取。通过将 `path` 设置为当前路径，就可以清除所有的路由参数。

vue-router 的params query传参

在使用 Vue.js 进行前端开发时，经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router，可以方便地进行页面的跳转和参数的传递。

vue-router 支持两种方式进行参数传递：params 和 query。

params 传参：

params 是路由路径中的占位符，可以通过 $route.params 来获取传递的参数。使用 params 传参时，需要在定义路由规则时使用冒号将参数名包裹起来，例如：

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

在上面的例子中，定义了一个 /user/:id 的路由规则，其中 :id 是一个占位符，可以接受任意的参数。

在组件中访问传递的参数时，可以通过 $route.params.id 来获取：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

在使用 params 传参时需要注意，如果在同一个路由规则下，参数发生变化时不会触发组件的生命周期钩子函数，需要通过 watch 监听 $route 对象来实现：

const User = {
  template: '<div>User {{ id }}</div>',
  watch: {
    '$route.params.id' (to, from) {
      this.id = to
    }
  },
  data () {
    return {
      id: ''
    }
  }
}

query 传参：

query 是通过 URL 的查询字符串传递参数，可以通过 $route.query 来获取传递的参数。使用 query 传参时，需要在定义路由规则时使用问号将参数名包裹起来，例如：

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

在组件中访问传递的参数时，可以通过 $route.query.id 来获取：

const User = {
  template: '<div>User {{ $route.query.id }}</div>'
}

在使用 query 传参时需要注意，参数的值会被转换为字符串类型，如果需要传递数组或对象等复杂数据类型，需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如：

// 在路由中传递数组参数
router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } })

// 在组件中获取数组参数
const User = {
  template: '<div>User {{ ids }}</div>',
  computed: {
    ids () {
      return JSON.parse(this.$route.query.ids)
    }
  }
}