前端Day12----路由传参的两种方法（query，params）

使用 query 参数:（会显示在url上，会被缓存）

// 定义路由
const routes = [
  {
    path: '/users',
    component: UsersComponent,
  },
]

// 跳转到带有 query 参数的路由
this.$router.push({
  path: '/users',
  query: {
    page: 2,
    limit: 10,
  },
})

// 在组件中获取 query 参数
export default {
  computed: {
    page() {
      return this.$route.query.page || 1
    },
    limit() {
      return this.$route.query.limit || 10
    },
  },
}

使用 params 参数:（不会显示在url上，不会被缓存）

// 定义路由
const routes = [
  {
    path: '/users/:id',
    component: UserDetailComponent,
  },
]

// 跳转到带有 params 参数的路由
this.$router.push({
  name: 'UserDetail',
  params: {
    id: 123,
  },
})

// 在组件中获取 params 参数
export default {
  created() {
    console.log(`User ID: ${this.$route.params.id}`)
  },
}