vue3路由新玩法useRoute和useRouter详解

您所在的位置：网站首页 › 路由传参区别 › vue3路由新玩法useRoute和useRouter详解

vue3路由新玩法useRoute和useRouter详解

2023-10-24 22:53| 来源: 网络整理| 查看: 265

原来的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 = [ { 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 = [ { 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/

【本文地址】

vue3路由新玩法useRoute和useRouter详解

vue3路由新玩法useRoute和useRouter详解

今日新闻

推荐新闻