Vue路由传参的完整代码

好的，下面是Vue路由传参的完整代码：

1. 对于使用params传参的情况：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import User from '@/views/User.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

// views/User.vue
<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

2. 对于使用query传参的情况：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import User from '@/views/User.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: User
    }
  ]
})

// views/User.vue
<template>
  <div>
    <h1>User ID: {{ $route.query.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>