Vue3中useRoute和useRouter如何实现路由新玩法？

本文共计877个文字，预计阅读时间需要4分钟。

目录 + 使用useRouter控制路由变化 + 使用useRouter传递参数的三种方式 + 隐式传递参数params + 显式传递参数query + 动态路由传参 + useRouter的push和replace + 原生vue2路由是通this.$route和this.$router来控制的

目录

• 我们通过useRouter来手动控制路由变化
• 通过useRouter传参的三种方式
• 隐式传参params
• 显式传参query
• 动态路由传参
• useRouter 的push和replace

原来的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使用路由的问题，去这里基本都可以得到解决 router.vuejs.org/zh/api/

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。