原来的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传参的三种方式
隐式传参params
import { useRouter } from 'vue-router' export default { setup() { const userRouter = useRouter() userRouter.push({ name: 'Home', params: { name: 'dx', 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) } }
显式传参query
import { useRouter } from 'vue-router' export default { setup() { const userRouter = useRouter() userRouter.push({ path: '/', query: { name: 'dx', 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去取显式路由的参数
动态路由传参
首页跟以前一样,我们在配置页面路由的时候就需要配置动态路由的名称,这里配置id
const routes: Array<RouteRecordRaw> = [ { path: '/about/:id', name: 'About', component: About } ]
useRouter 传递动态参数id = 1 ,大多数时候动态参数都是简单数据类型,如果不是,你没必要用动态参数。
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', }) } }
我在无意之间发现一个有意思的问题,也不知道是不是一个bug
import { useRouter } from 'vue-router' export default { setup() { const userRouter = useRouter() userRouter.push({ path: '/about/1', replace: true }) } }
当我调用push方法传入replace为true时,真的就是replace的形式,传入replace为false才恢复正常
然后我又试了一下replace
import { useRouter } from 'vue-router' export default { setup() { const userRouter = useRouter() userRouter.replace({ path: '/about/1', replace: false }) } }
import { useRouter } from 'vue-router' export default { setup() { const userRouter = useRouter() userRouter.replace({ path: '/about/1', push: true }) } }
以上两种方式都是replace的形式。
push的时候传入replace为true结果是replace,那还需要replace方法么,也不知道是不是bug。
当然了,你可能还有许多关于vue3使用路由的问题,去这里基本都可以得到解决 https://router.vuejs.org/zh/api/
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。