路由传参和路由守卫

Posted 2023-03-18

参考技术A 第一种情况就是以path形式

第二种情况就是以路由对象Object的形式

注意这里的name指的是具名路由，在路由列表中的配置如下

而WuHan则是这个路由要抵达的模板或者说页面，定义如下

注意由于在<router-link>中是通过query的形式区传递参数，所有在目的地页面中也只能采用query的形式获取参数。
也可以不采用query的方法，而采用params的形式传递参数

那么在在路由列表中的path中必须带上params传递过来的参数，否则在目的页面中无法获取参数

在目的页面中以params的形式获取参数对应的值

注意事项：不可以在<router-link>的路由对象中同时出现path和params，此时params作废。目的页面中获取不到参数。

推荐是name和params搭配，path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数，
因为采用params的方式传递参数，当你进入到目的页面后确实能够正确地获取参数,但是，当你刷新页面时，参数就会丢失。

所以推荐使用query地形式传递参数。

最后谈谈 route地区别。结论：没有任何关系。
router是实现路由跳转的， route。
或者是 route.params.city。也就是说， route作用在路由不同的阶段。

原文： https://blog.csdn.net/qq_23143555/article/details/81301873

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

你可以使用 router.beforeEach 注册一个全局前置守卫：

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

权限判断部分，如果没有权限就会跳转到登录页