vue-router路由重定向不能用“动态返回重定向目标”？？？

最新推荐文章于 2024-05-16 23:40:36 发布
最新推荐文章于 2024-05-16 23:40:36 发布
阅读量114 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65260966/article/details/137892097
版权

一个小需求，根据用户登录与否，决定是否启用重定向，即用户登录之后除了点“退出登录”，不能通过url回到登录页。

本来看vue-router官网写的挺好的

结果我用他提示

毕竟是初学者，我也搞不明白，猜测可能是to这个东西是守卫里的，在这没法用，所以我就找到了另一种方式，就是通过路由守卫。

我是个菜鸟，要是有大佬看见了给我解答一下，不胜感激。大概解释一下代码意思：如果用户有越界行为（登录信息不存在还要跳过登录页进入首页）就给他重定向到 “ / ” ，else如果用户登录信息存在并且用户还要二次登陆就给他重定向到 " /main " 登陆成功后的首页。 

ℋᙚᵐⁱᒻᵉ鲸落
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router路由重定向redirect的使用事项
qq_44844751的博客
04-07 2897
vue-router路由重定向redirect的使用事项 在一个路由使用redirect重定向到另一个路由时，这个路由本身也需要component对应一个页面，而且这个页面里还要有< router-view >< /router-view>最终才能成功的跳转 ...
VUE的路由（vue-router）传参以及路由重定向
致我逝去的青春的博客
03-05 1913
VUE的路由（vue-router） • 参考网址：https://router.vuejs.org/zh/ • Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 • 路由：一个路径对应一个组件 • 一个简单的路由配置需要4步 • 创建组件 • 配置路由映射表 • 注册路由配置表 • 把路由挂在在根实例上 vue-rout...
Vue-router：4、路由重定向
tinglis的博客
03-03 2309
Vue-router：4、路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user
vue 后台重定向不成功_vue-router重定向不刷新问题的解决
weixin_35558751的博客
01-15 2700
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。问题描述:之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。解决方法：通过阅读vue-router的官方文档，发现重定向可以解决这个问题。如之前文件路径是'/live/detail/id=7234'，'/skil...
路由 vue-router 路由守卫 路由重定向 路由嵌套 路由守卫 路由命名 路由懒加载
weixin_49230250的博客
08-28 2277
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1.基本使用 (1)安装 ①初始化项目时选择安装vue-router ②手动安装 npm i vue-r
6-6.Vue-router之路由重定向
落叶的博客
02-06 2887
Vue-router 路由重定向redirect 路由重定向：一般用在不同的页面跳转到同一个页面或是同一组件的情况。 这时需要用到的是redirect参数，将要跳转的页面路径添加到redirect参数后。 在路由重定向时，有两种情况： 1.不携带参数进行路由重定向 例子：demo2页面重定向到demo页面 在src/router/index.js文件下增加demo2路由，这时不需要写compon...
vue-router的路由重定向如何实现？
爬楼梯的前端小白的博客
07-31 505
路由定向 用户在访问地址A的时候 强制用户跳转到地址C 从而展示特定的组件页面 route 路由匹配规则： 每个路由规则都是一个对象这个规则对象身上有两个必须的属性： // {path:'路由地址A', redirect:'路由地址B'} // A 重定向执行 B 属性1 是path 表示监听 哪个路由链接地址； 属性2 是component 表示如果 路由是前面匹配到的path则展示component属性对应的哪个组件 注意：component 的属性值必须是一个组件的模板对象......
Vue-router之重定向
u014265398的博客
11-16 296
一.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue基础之重定向</title> </head> <body> <div id="app"> <router-link to="/a">首页</router-link> <router-link to="/b"&
vue-router中重定向和别名
老余的博客
09-26 506
看名字都能看出来重定向就是 重新定一个跳转方向，而别名就相当于小名 取个小名。以下为详细介绍：.别名（alias）： 可以造成 一个组件，对应俩个url /user/userA 的别名是 /user/userB，意味着，当用户访问 /user/userB时，URL会保持为 /user/userB，但是路由匹配则为 /user/userA， { path: “userA”, component: UserA, alias: “userB” } "别名” 可以自由地将UI结构映射到任意的URL，而不是受限于
vue-router重定向和路由别名的使用讲解
12-11
一、重定向（你访问这个路径，但他跳到另一个路径，地址栏中显示目标路由的那个路径） “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b 二、路由别名（就是给这个路由起了个名字，...
vue-router重定向不刷新问题的解决
08-27
本篇文章主要介绍了vue-router重定向不刷新问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 382
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 277
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
vue中的事件
最新发布
weixin_43390711的博客
05-16 43
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 435
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 227
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
根据地址栏url上key获取值
wwf1225的博客
05-10 251
/ 根据url上key获取值，key为参数名字，例如token。
vue-router冲重定向
08-19
对于Vue Router的重定向，可以通过使用`redirect`属性来实现。在路由配置中，可以将一个路径重定向到另一个路径或者组件。 以下是一个示例： ```javascript const routes = [ { path: '/', redirect: '/home' // 将根路径重定向到 '/home' }, { path: '/home', component: Home }, { path: '/about', component: About } ] ``` 在上面的示例中，当用户访问根路径 `/` 时，会重定向到 `/home` 路径。 还可以使用函数来动态地重定向： ```javascript const routes = [ { path: '/user/:id', redirect: to => { // 根据用户的id进行动态重定向 return `/profile/${to.params.id}` } }, { path: '/profile/:id', component: Profile } ] ``` 在上面的示例中，当用户访问 `/user/:id` 路径时，会根据用户的id动态地重定向到 `/profile/:id` 路径。 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ℋᙚᵐⁱᒻᵉ鲸落

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值