vue router中params和query传参的区别

params和query都是在路由跳转时传递参数的方式，但是它们的传递方式不同。params参数是直接绑定在路由路径上，形式是 /path/:paramName，query参数则是通过 ?key=value 的形式添加在路由地址后面。

对于params参数，路由定义中的path必须包含对应的参数名，否则会匹配失败。而对于query参数，则可以有或者没有，不影响路由匹配。

另外，params参数不方便在路由地址中直接修改，需要在代码中通过$router.push方法来改变，而query参数能够直接在路由地址中修改，比较灵活。

相关问题

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)
    }
  }
}

vue-router 的params query传参例子

假设我们有两个页面，分别是 `Home.vue` 和 `Article.vue`，我们需要在 `Home.vue` 页面中点击某个文章链接跳转到 `Article.vue` 页面，并且传递文章的 id 和 title 信息。

在 `Home.vue` 页面中，我们可以这样定义链接：

<router-link :to="{ name: 'article', params: { id: 1, title: 'Vue Router' }, query: { category: 'web' } }">查看文章</router-link>

这里我们使用了 `router-link` 组件来创建链接，`to` 属性指定了链接的目标地址，其中：

- `name: 'article'` 表示目标页面的路由名称是 `article`，这个名称是在路由配置中定义的；
- `params: { id: 1, title: 'Vue Router' }` 表示传递了两个路由参数，一个是 `id`，值为 `1`，另一个是 `title`，值为 `Vue Router`；
- `query: { category: 'web' }` 表示传递了一个查询参数，键为 `category`，值为 `web`。

在路由配置中，我们需要定义 `article` 页面的路由规则，并且指定 `id` 和 `title` 作为路由参数：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/article/:id/:title',
    name: 'article',
    component: Article,
    props: true
  }
]

这里我们使用了动态路由参数来接收 `id` 和 `title` 的值，`props: true` 表示将路由参数作为组件的 props 传递给目标组件。

在 `Article.vue` 组件中，我们可以这样获取路由参数和查询参数：

export default {
  name: 'Article',
  props: ['id', 'title'],
  created() {
    console.log(this.id, this.title) // 输出 1 'Vue Router'
    console.log(this.$route.query.category) // 输出 'web'
  }
}

这里我们通过 props 接收路由参数，并在 `created` 钩子函数中输出参数的值，同时使用 `$route.query` 获取查询参数的值。