vue路由传参params和query
1、params传参页面
<template>
<button @click="params()">params传参</button>
</template>
<script>
export default {
methods: {
params() {
this.$router.push({
name: 'about',
params: {
page: '1',
code: '1234'
}
})
}
}
}
</script>
params接收参数页面
<script>
export default {
data () {
return {
page: '',
code: ''
}
},
created () {
this.routerData()
},
methods: {
routerData () {
this.page = this.$route.params.page
this.code = this.$route.params.code
console.log('page', this.page)
console.log('code', this.code)
}
}
}
</script>
使用params接收的参数如果强制刷新后数据会消失，所以最好使用query进行传参
2、query传参页面
<template>
<button @click="query()">query传参</button>
</template>
<script>
export default {
methods: {
query () {
this.$router.push({
name: 'about',
query: {
page: '1',
code: '1234'
}
})
}
}
}
</script>
query接收参数页面
<script>
export default {
data () {
return {
page: '',
code: ''
}
},
created () {
this.routerData()
},
methods: {
routerData () {
this.page = this.$route.query.page
this.code = this.$route.query.code
console.log('page', this.page)
console.log('code', this.code)
}
}
}
</script>
