Vue Router 4.x 如何隐式给路由传参params

本文主要是介绍Vue Router 4.x 如何隐式给路由传参params，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue Router 官方说明文档的路由传参：https://router.vuejs.org/zh/guide/essentials/navigation.html

1、params 方式传参

此方式在4.0版本后就不能隐式的传参了，比如想在路由里加入username参数，则必须先在路由配置里，给你当前的路径path里写入明确的动态参数 “/users/:username”，如果path里不加:username，那么你代码里跳转时写的：router.push({ name: ‘user’, params: { username: ‘yourname’ } }) ，里面的params参数就会无效，到时你在 route.params 里也拿不到任何值。

2、query 方式传参

此方式会在你要进入的路径后边拼接上查询参数 ?username=yourname ，这么做完全可以在 route.query 里拿到传入的值。
但是如果你使用了 “KeepAlive” 来缓存你的组件，那么就会无效，路由会认为这是一个新的路径，因为你在路由配置里的 path 里没有匹配这个带 ?xxxx 的查询参数路径。

3、meta 传参，最便捷的隐式传参

官方建议的是结合 Pinia 状态管理来传参，但是有时我又不想这么费事，仅仅是传一个id之类的，还要用状态管理未免有些麻烦，所以我发现了另一种传参方式，利用路由的 “meta” 属性。

首先在路由配置里，填写meta属性

const routes = [{ path: '/user', component: usercomponent, meta: { username: null } },
]

然后在你需要添加参数的组件里，使用路由导航守卫 onBeforeRouteLeave

// 会省略一些业务代码，只写关键部分
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave((to, from) => {// 把要传入的参数写在to对象里的meta里，对应上面配置好的usernameto.meta.username = 'yourname'
})

最后可以在需要获取路由参数的组件里，使用watch，观察route.meta.username的值变化。

// 会省略一些业务代码，只写关键部分
import {watch} from 'vue';
watch(() => route.meta.username, (newValue) => {console.log('路由传参：', newValue)
})

这篇关于Vue Router 4.x 如何隐式给路由传参params的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---