Vue 3.0 路由跳转中的参数传递:params与query详解
最编程
2024-08-01 18:59:30
...
路由传参query:
<template>
<div>
<button @click="routerFn">路由传参</button>
</div>
</template>
<script>
import { defineComponent,ref } from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
name:'home',
setup() {
const userRouter = useRouter()
let name=ref('zhihui')
let age=ref(30)
let obj=ref({'favirate':'running'})
let routerFn=()=>{
userRouter.push({
// name:'About',
path:'/about',
query:{
name:name.value,
age:age.value,
obj:JSON.stringify(obj.value)
}
})
}
return{
routerFn,
}
},
})
</script>
路由接参query
<template>
<div class="about">
<h1></h1>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import {useRoute} from 'vue-router'
export default defineComponent({
setup() {
let route = useRoute()
console.log( route,router.query)
return{
}
},
})
</script>
这里有个坑,标注一下
路由传参params
<template>
<div>
<button @click="routerFn">路由传参</button>
</div>
</template>
<script>
import { defineComponent,ref } from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
name:'home',
setup() {
const userRouter = useRouter()
let name=ref('zhihui')
let age=ref(30)
let obj=ref({'favirate':'running'})
let routerFn=()=>{
userRouter.push({
// name:'About',
path:'/about',
params:{
name:name.value,
age:age.value,
obj:JSON.stringify(obj)
}
})
}
return{
routerFn,
}
},
})
</script>
路由接参params
<template>
<div class="about">
<h1></h1>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import {useRoute} from 'vuex'
export default defineComponent({
setup() {
let route = useRoute()
console.log( route,route.params)
return{
}
},
})
</script>
你有没有照抄上面的代码,如果有,你一定发现,route.params是空。
为什么呢?
因为在传参的时候params跟name:‘About’,这个属性配对,如果写path:’/about’, params:{}.这样就是错了。不能正常输出route.params
正解的把 path:’/about’,注释掉。使用 name:‘About’,
上一篇: 路由传参说有几种方式
推荐阅读
-
Vue中params和query两种路由传参方式的差异与比较
-
在Vue中可能遇到的路由参数传递问题与注意事项
-
用Vue3.0打造Todo List:探索query参数与params传递方法的实践指南
-
Vue Router: 详解参数传递 - params与query的区别与用法
-
Vue 3.0 路由跳转传递参数 (使用 router.push) 的方法
-
Vue中params和query两种路由传参方式的差异与比较
-
Vue 3里的query与params参数在路由传递中的应用与操作指南
-
Vue Router 的三种常用参数传递方法:params与query详解
-
Vue 3中三种路由参数传递方式详解:query、params与动态路由参数——从query传参开始
-
uni-app 框架中的页面导航与参数传递 - 详解" 1.1 跳转界面的不同途径