Vue Router：查询参数与动态路由参数示例

下面我用 Vue Router 为例，给你写一个完整的示例，分别演示查询参数传参 和动态路由传参的用法。

1. 路由配置（router/index.js）

JavaScript 复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import QueryPage from '../views/QueryPage.vue'
import ParamsPage from '../views/ParamsPage.vue'

Vue.use(VueRouter)

const routes = [
  // 查询参数传参示例页
  {
    path: '/query',
    name: 'Query',
    component: QueryPage
  },
  // 动态路由传参示例页
  {
    path: '/params/:id', // 动态路由配置
    name: 'Params',
    component: ParamsPage
  }
]

const router = new VueRouter({
  routes
})

export default router

2. 查询参数传参示例

跳转页面（Home.vue）

Plain 复制代码

<template>
  <div>
    <h2>查询参数传参</h2>
    <button @click="goWithQuery">跳转到查询页（传多个参数）</button>
  </div>
</template>

<script>
export default {
  methods: {
    goWithQuery() {
      // 方式1：字符串拼接
      this.$router.push('/query?name=张三&age=25&city=北京')
      
      // 方式2：对象写法（推荐）
      // this.$router.push({
      //   path: '/query',
      //   query: {
      //     name: '张三',
      //     age: '25',
      //     city: '北京'
      //   }
      // })
    }
  }
}
</script>

接收参数页面（QueryPage.vue）

Plain 复制代码

<template>
  <div>
    <h2>查询参数接收页</h2>
    <p>姓名：{{ $route.query.name }}</p>
    <p>年龄：{{ $route.query.age }}</p>
    <p>城市：{{ $route.query.city }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.query) // { name: '张三', age: '25', city: '北京' }
  }
}
</script>

3. 动态路由传参示例

跳转页面（Home.vue）

Plain 复制代码

<template>
  <div>
    <h2>动态路由传参</h2>
    <button @click="goWithParams">跳转到动态路由页（传单个ID）</button>
  </div>
</template>

<script>
export default {
  methods: {
    goWithParams() {
      // 方式1：字符串拼接
      this.$router.push('/params/123')
      
      // 方式2：命名路由（推荐）
      // this.$router.push({
      //   name: 'Params',
      //   params: {
      //     id: '123'
      //   }
      // })
    }
  }
}
</script>

接收参数页面（ParamsPage.vue）

Plain 复制代码

<template>
  <div>
    <h2>动态路由接收页</h2>
    <p>用户ID：{{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params) // { id: '123' }
  }
}
</script>

4. 核心区别总结

特性	查询参数传参 (`$route.query`)	动态路由传参 (`$route.params`)
URL 示例	`/query?name=张三&age=25`	`/params/123`
适用场景	适合传递多个参数，如筛选条件	适合传递单个关键参数，如ID
路由配置	无需特殊配置	需要在路由中定义 `:参数名`
刷新页面	参数不会丢失	参数不会丢失