vue3 路由useRoute 和useRouter的使用
vue3的路由使用~
·
最近的新项目采用vue3来实现,vue2跟vue3还是有所变化的,useRoute相当于vue2的this.$route,而useRoute相当于vue2的this.$router。
通过useRouter来手动控制路由变化
import { useRouter } from 'vue-router'
export default{
setup(){
const router = useRouter()
router.push({path:'/index'})
}
}
通过useRouter传参的三种方式
隐式传参params
import { useRouter } from 'vue-router'
export default {
setup() {
const router= useRouter()
router.push({
name: 'index',
params: {
name: 'youfei',
age: 18
}
})
}
}
请注意params只与name搭配生效,name就是route配置时的name
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: index
}
]
通过useRoute来接收params参数
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.params)
}
}
显式传参query
import { useRouter } from 'vue-router'
export default {
setup() {
const router= useRouter()
router.push({
path: '/',
query: {
name: 'youfei',
age: 18
}
})
}
}
path与query是一对,name和params是一对,请别混用。
通过useRoute来接收query参数
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}
总结一下显式路由和隐式路由的区别
除了它们的传递和接收方式不同外
显式query会很明显的跟在新的url上,而隐式params不会
隐式params在刷新后可能会消失,我们可以在它存在的时候存如缓存中,如localstorage
隐式params比显式query相对而言更安全,不会将参数直接暴露给用户
显示query在浏览器的url上,如果你直接通过字符串的方式去取,可能会涉及转码等问题,当然useRoute将这些都处理好了,所以还是推荐通过useRoute.query去取显式路由的参数
更多推荐
已为社区贡献2条内容
所有评论(0)