Vue2中路由参数($route.params和$route.query)的使用方法详解

// router/index.ts
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/demo',
      name: 'Demo',
      component: () => import('@/views/Demo.vue')
    }
  ]
})

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Demo extends Vue {
  // 直接在生命周期取值，添加类型
  name!: string
  age!: number

  created() {
    // query 取值
    this.name = this.$route.query.name as string
    this.age = Number(this.$route.query.age)
  }
}
</script>

routes: [
  {
    path: '/user/:id', // 动态参数 id
    name: 'User',
    component: () => import('@/views/User.vue')
  }
]

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class User extends Vue {
  userId!: number

  created() {
    // params 取值
    this.userId = Number(this.$route.params.id)
  }
}
</script>

import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      id: 0,
      username: ''
    }
  },
  created() {
    // params
    this.id = Number(this.$route.params.id)
    // query
    this.username = this.$route.query.username as string
  }
})

import 'vue-router'

declare module 'vue-router' {
  interface RouteParams {
    id?: string
  }
  interface RouteQuery {
    name?: string
    age?: string
  }
}

created() {
  // params 自带类型
  const id = this.$route.params.id
  // query 自带类型
  const name = this.$route.query.name
}

// 编程式导航
this.$router.push({
  path: '/demo',
  query: { name: '李四', age: 20 }
})

this.$router.push({
  name: 'User', // 路由配置里的 name
  params: { id: 1002 }
})

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  watch: {
    // 监听整个路由对象
    $route(to) {
      console.log('新参数：', to.params.id, to.query.name)
      this.handleRouteParams()
    }
  }
})
export default class User extends Vue {
  handleRouteParams() {
    const id = Number(this.$route.params.id)
    console.log('当前id：', id)
  }

  created() {
    this.handleRouteParams() // 首次进入执行
  }
}
</script>