一、传递参数

路由参数都是在路由跳转时进行传递,将参数与路径之间用 ? 分割:

  1. <router-link to="/home/studentsUpdate?_id=001">修改学生</router-link>

上例中,001 就是我们通过路由传递的参数,_id 是参数名称。
push 跳转时同理:

  1. this.$router.push('/home/studentsUpdate?_id=001')

除了用 ? 拼接字符串传递参数外,还可以以对象的形式传递:

  1. this.$router.push({
  2. path: '/home/studentsUpdate',
  3. query: {
  4. studentsId: '001'
  5. }
  6. })

二、路由配置

query 传递参数的方式并不会改变路由的路径,因此在路由配置上还是跟普通路由的配置一样

三、接收参数

在组件中,接收路由中的 query 参数依然是通过 $route 对象:

  1. <template>
  2. <h1>{{$route.query._id}}</h1>
  3. </template>
  4. <script>
  5. export default {
  6. created() {
  7. console.log(this.$route.query._id)
  8. }
  9. }
  10. </script>

$route 对象中的 query 属性用来接收路由中的参数。