query可以一次传入多个参数
- 传递参数
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link :to="'/user/'+userID">用户</router-link>
<router-link :to="Cquery">传参</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
userID: 'lisi',
Cquery: {
path: '/query',
query: {
name: 'aaa',
age: 18,
height: 185
}
}
}
}
}
</script>
<style>
.router-link-active {
color: crimson;
}
</style>
- 使用参数
<template>
<div>
<h2>我是query组件</h2>
<span>{{ $route.query.name }}</span>
<span>{{ $route.query.age }}</span>
<span>{{ $route.query.height }}</span>
</div>
</template>
<script>
export default {
name: 'query'
}
</script>
<style>
</style>