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

最新推荐文章于 2024-09-09 21:36:11 发布
最新推荐文章于 2024-09-09 21:36:11 发布
阅读量185 收藏
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65260966/article/details/137892097
版权
本文讲述了作者作为初学者在使用VueRouter时，如何根据用户登录状态启用或禁用重定向。通过路由守卫实现逻辑：登录状态下重定向至main页面，未登录则跳转至首页，旨在防止未经登录直接访问登录页。
摘要由CSDN通过智能技术生成

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

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

结果我用他提示

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

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

ℋᙚᵐⁱᒻᵉ鲸落
关注
实现 Vue 路由不存在时跳转到当前页面的技术指南
m0_73734137的博客
01-06 988
在Vue中，当用户访问一个不存在的路由时，通常会显示一个404页面。接下来，我们需要在路由配置中添加一个通配符路由，以便在用户访问不存在的路由时能够跳转回当前页面。在上面的代码中，我们定义了两个路由：一个是根路径'/'对应Home组件，另一个是'/about'对应About组件。接下来，我们需要在Vue实例中使用这个路由。在上面的代码中，我们使用通配符'*'来匹配所有不存在的路由，并将其重定向到根路径'/'。现在，当用户访问不存在的路由时，他们将会被重定向到当前页面，而不是显示一个错误页面。
6-6.Vue-router之路由重定向
落叶的博客
02-06 3006
Vue-router 路由重定向redirect 路由重定向：一般用在不同的页面跳转到同一个页面或是同一组件的情况。 这时需要用到的是redirect参数，将要跳转的页面路径添加到redirect参数后。 在路由重定向时，有两种情况： 1.不携带参数进行路由重定向 例子：demo2页面重定向到demo页面 在src/router/index.js文件下增加demo2路由，这时不需要写compon...
vue-router配置路由重定向不生效问题
毅香雪海的博客
05-22 1075
vue-router配置路由重定向不生效问题
路由重定向
最新发布
m0_74461206的博客
09-09 241
即为重定向，可以一进入项目就马上访问到指定位置，这里是首页。重定向：在项目跑起来的时候，访问/,立马让他定向到首页。
路由动态重定向
唯心所现，唯识所变
04-19 514
项目是基于vue-element-admin来写的。 具体的动态路由实现请参考，上一篇文章，此文章主要介绍动态重定向。 代码src/promission.jssrc/login/userlogin src/promission.js import router from './router' import store from './store' // import { Message } from 'element-ui' import { getAccessToken } from '@/utils/a
vue-router重定向
jdrunk的博客
11-13 219
往往设置不同的路径进行跳转，但有时候不同的路径可能是同一个页面，或者说同一个组件，这时候就需要路由的重定向。 routes: [{ path: '/', //路由路径 redirect: '/sys' //重定向的路径就是要跳转的那个页面的路径 }, { path: '*', redirect...
Vue路由重定向
m0_53951384的博客
11-08 2903
编程式导航，如何跳转传参？1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'})动态路由传参this.$router.push('/路径/参数值')path: '/路径/参数值'})2.name命名路由跳转query传参name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'})
基于vue-router 多级路由redirect 重定向的问题
10-18
**知识点三：多级路由重定向的问题** 在多级路由中进行重定向时，如果路径没有正确配置，可能会导致页面无法加载或者加载的页面不正确。例如，重定向时如果目标路由不存在或者重定向路径书写错误，就会出现 404 ...
vue-router重定向不刷新问题的解决
08-27
在使用 Vue Router 进行路由重定向时，可能会遇到重定向不刷新的问题。本文将详细介绍该问题的解决方法。 首先，需要了解 Vue Router 的重定向机制。 Vue Router 提供了重定向的功能，可以将旧的路由重定向到新的...
vue-router重定向和路由别名的使用讲解
10-17
Vue Router 是 Vue.js 应用中的官方路由...正确地使用这两个特性，可以使用户更容易地找到他们想要的内容，同时也能简化开发者对路由的管理。了解并熟练运用这些概念，将有助于提升 Vue.js 应用的用户体验和开发效率。
vue 后台重定向不成功_vue-router重定向不刷新问题的解决
weixin_35558751的博客
01-15 2779
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。问题描述:之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。解决方法：通过阅读vue-router的官方文档，发现重定向可以解决这个问题。如之前文件路径是'/live/detail/id=7234'，'/skil...
vue动态设置路由重定向
weixin_57722232的博客
12-02 2471
需求为：项目分为业务系统和后台管理系统，重定向路由‘/’ 在业务系统显示为homepage，在后台管理系统首页显示为 dashboard； 实现 在router.js: importVuefrom'vue' importRouterfrom'vue-router' importLayoutfrom'../layout/index' importstorefrom'@/store' Vue.use(Router) exportconstconstantRouter...
关于VUE的路由重定向问题
Yxd0724的博客
06-15 1432
配置路由之后，默认访问path是“/”，此时只需给该路由对象中添加redirect属性，属性值为原path的属性值。 简单理解为启动项目时访问的是http://localhost:8080/,假如此时redirect:"/login"，则启动项目后的默认访问地址为http://localhost:8080/login。 import Vue from 'vue' import Router from 'vue-router' //使用路由 Vue.use(Router) export defa
动态路由的意义，以及路由重定向
weixin_34008784的博客
04-10 487
to 和：to 的区别： ******** <router-link to="apple/123456">to red apple</router-link> //表示跳转只apple的子路由为123456的页面去 不带 :to <router-link :to="{path:'apple/ip'}">to red apple</router-...
Vue笔记--Router路由--VueRouter--重定向、别名、导航守卫、mode
一只勤勤恳恳的小前端
03-17 309
重定向、别名、导航守卫、mode 重定向 redirect 改变路由的跳转路径 示例 { path: '/xxxx', // 改变路由的跳转路径 redirect: '/' } <div id="app"> <!-- 设置router组件 --> <router-link to='/'>首
vue路由/懒加载/重定向/动态路由/跳转页面
weixin_40030173的博客
09-30 1934
两种引入路由组件的方式和区别 第一种 import Home from './../views/Home.vue' { path: '/', component: Home }, 第二种 { path: '/about', component: () => import('./../views/About.vue') } 区别： 第二种方式起到了懒加载的作...
vue-router根据权限动态设定路由重定向 redirect 的路径
weixin_43951592的博客
08-20 244
废话不多说
Vue访问不存在的路由，重定向跳转
轻风细雨_林木木
01-06 2788
Vue访问不存在的路由，重定向跳转 src/router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 重加载push方法，解决报错 const originalPush = Router.prototype.push Router.prototype.push = function push (location) { return originalPush.call(this, lo
vue-router冲重定向
08-19
对于Vue Router的重定向，可以通过使用`redirect`属性来实现。在路由配置中，可以将一个路径重定向到另一个路径或者组件。 以下是一个示例： ```javascript const routes = [ { path: '/', redirect: '/home' /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ℋᙚᵐⁱᒻᵉ鲸落

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

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

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

打赏作者

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

抵扣说明：

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

余额充值