0
点赞
收藏
分享

微信扫一扫

vue3路由新玩法useRoute和useRouter详解

原来的vue2路由是通过this.$route和this.$router来控制的。

现在vue3有所变化,useRoute相当于以前的this.$route,而useRouter相当于this.$router

一、useRouter手动控制路由变化

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.push("/home")
}
}

二、useRouter传参的三种方式

1.隐式传参params

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.push({
name: 'Home',
params: {
name: 'echohye',
age: 18
}
})
}
}

注意params只与name搭配生效,name就是route配置时的name

const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
}
]

通过useRoute来接收params参数

import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.params)
}
}

2.显式传参query

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.push({
path: '/',
query: {
name: 'echohye',
age: 18
}
})
}
}

path与query是一对,name和params是一对,请别混用。

通过useRoute来接收query参数

import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.query)
}
}

总结一下显式路由和隐式路由的区别

除了他们的传递和接收方式不同外

a.显式query会很明显的跟在新的url上,而隐式params不会

b.隐式params在刷新后可能会消失,我们可以在它存在的时候存如缓存中,如localstorage

c.隐式params比显式query相对而言更安全,不会将参数直接暴露给用户

显示query在浏览器的url上,如果你直接通过字符串的方式去取,可能会涉及转码等问题,当然useRoute将这些都处理好了,所以还是推荐通过useRoute.query去取显式路由的参数

3.动态路由传参

首页跟以前一样,我们在配置页面路由的时候就需要配置动态路由的名称,这里配置id

const routes: Array<RouteRecordRaw> = [
{
path: '/about/:id',
name: 'About',
component: About
}
]

useRouter 传递动态参数id = 1 ,大多数时候动态参数都是简单数据类型,如果不是,建议使用params。

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.push({
path: '/about/1',
})
}
}

通过useRoute来接收动态参数的方式和params一样

import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.params)
}
}

三、useRouter 的push和replace

push就是如上面的代码一样,就是在浏览器的历史记录中追加一个新的记录,你可以通过window.history看到这个记录。

而replace则是将当前的路由记录替换掉,替换后你如果回退,会发现上一个路由地址已经消失了。

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.replace({
path: '/about/1',
})
}
}

在push的时候,设置replace为true,可以达到上面一样效果

import { useRouter } from 'vue-router'
export default {
setup() {
const userRouter = useRouter()
userRouter.push({
path: '/about/1',
replace: true
})
}
}

可能还有许多关于vue3使用路由的问题,去这里基本都可以得到解决 ​​https://router.vuejs.org/zh/api/​​

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



举报

相关推荐

0 条评论