vue router params传参,路由守卫中无法获取

在Vue应用中使用router时遇到一个问题,即在路由守卫中无法获取通过`params`传递的参数。解决方案是将路径定义由`path`改为使用`name`,并改用`query`进行传参。原因是`params`参数必须配合`name`使用,而`query`参数在`name`和`path`下都可正常工作。

场景:

我使用router的params进行传参,在路由守卫中获取参数进行判断

现象:

守卫中无法到获取参数

解决方案:

  1. 将“path”参数替换为router中对应的“name”
  2. 不使用“params”传参,改为使用“query”传参

原因:

“params”参数需要由“name”参数引入,有且只有“name”字段时(“name”和“path”同时存在时不可以),“params”存入的值才可被获取。

“query”却可以在“name”和“path”两种情况下正常工作传值取值

### 设置和使用路由守卫Vue Router 中,可以通过多种方式配置路由守卫来控制导航行为。全局前置守卫允许在整个应用级别拦截所有的导航请求;而组件内的守卫则可以针对具体的组件实例执行逻辑。 对于更细粒度的权限管理需求,则可利用 **路由独享守卫** 来实现特定路径下的访问控制[^3]: ```javascript const routes = [ { path: '/users/:id', component: UserDetails, beforeEnter: (to, from) => { // 如果条件不满足就阻止进入此页面 if (!isUserAllowed(to.params.id)) { return false; } }, }, ]; ``` 另外一种常见的场景是在某些页面加载前验证用户身份认证状态。这通常涉及到 `meta` 字段中的自定义属性,比如 `requiresAuth` 为布尔型的数据标记受保护的页面[^2]: ```javascript { path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { requiresAuth: true } } ``` 为了确保只有经过授权的用户才能看到仪表板内容,在实际项目里还需要配合导航守卫来进行鉴权操作: ```javascript router.beforeEach((to, from, next) => { const isAuthenticated = /* 获取当前用户的登录状态 */; if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated) { next({ path: '/login' }); } else { next(); } } else { next(); } }); ``` 上述代码片段展示了如何基于路由元信息判断目标地址是否需要进行身份验证,并据此决定下一步的动作——重定向至登陆页或是继续前进到目的地。 最后得注意的是 `<router-link>` 组件用于创建指向其他视图的内容链接,其内部支持动态参数绑定等功能特性[^4]: ```html <router-link class="button is-primary" :to="{ name: 'view-contact', params: { person: person.slug }}" > View Person </router-link> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值