使用 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}`)
},
}