Vue入坑——vue-router的重定向redirect

最新推荐文章于 2024-06-14 10:36:46 发布
最新推荐文章于 2024-06-14 10:36:46 发布
阅读量4.5k 收藏 2
点赞数 1
文章标签： javascript python java ViewUI
原文链接：https://my.oschina.net/u/3802541/blog/1811061
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

上一篇：单页面配置多路由

一起学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

在开发当中，我们往往设置不同的路径进行跳转，但有时候不同的路径可能是同一个页面，或者说同一个组件，这时候就需要路由的重定向。

基本redirect重定向

这里我们实现一个点击返回主页就跳转到模板里的HelloWorld.vue

a、先在index.js里配置

193727_8EJ2_3802541.png

下面的redirect的路径就是我们要跳转到的组件的路径，我们这里要跳转到模板里的helloworld，他的路径就是‘/’

b、在App.vue中写路由跳转链接router-link

      <router-link to="/gohome">返回主页</router-link>

c、看看结果

194020_z8Hb_3802541.png

带参数的重定向

a、先配置路由路径

在index.js里配置

195027_h2zO_3802541.png

b、在App.vue中进行跳转

  <router-link to="/gohomewithparam/555/java">带参数返回</router-link>

c、结果

195134_gmNk_3802541.png

——————————^~^我是萌萌哒分割线^~^————————————————

下一篇：

转载于:https://my.oschina.net/u/3802541/blog/1811061

weixin_34362875
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0 一个login跳转实例
Money
02-28 2638
需要解决的问题： store存储登录状态 Vue-Router导航钩子拦截路由 Vue-Resource获取后台的数据 需要判断登录返回的user 源码参考 主要技术栈：Vuex + Vue-Resource + Vue-Router 后台用mock-data来模拟数据。先来看一下效果图第一步、起个项目打开控制台输入$ npm install --global vue
VUE中路由的重定向——redirect
qq_44173499的博客
03-12 2万+
VUE中路由的重定向——redirect 重定向：path中的url地址不能和redirect中的 { path:'/', redirect:'/index' }, 代码： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"&g...
vue 返回登录页
九亿宅男的梦的博客
02-25 584
1. this.$router.push('/login'); 2. async logout() { await this.$store.dispatch('logout_store'); this.$router.push(`/login?redirect=${this.$route.fullPath}`); },
Vue路由重定向
最新发布
2303_77164348的博客
06-14 426
在 Vue Router 中，路由重定向（redirect）是一种将一个 URL 重定向到另一个 URL 的方法。
Vue知识整理，专题之路由：4、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式
鲁迷那的专栏—坚持实践后再写出来！
03-28 1万+
一、前言 上一节我们介绍了路由-路由（vue-router）的基本使用、router-link的使用，详细可参考博文：原创Vue笔记整理，专题之路由：3、路由-路由（vue-router）的基本使用、router-link的使用这篇文章我们将介绍：路由-路由redirect重定向的使用、设置选中路由高亮的两种方式 二、路由-路由redirect重定向的使用 1、设置默认页面 我们以上篇......
Vue Router中redirect的使用方法
weixin_62353876的博客
11-08 3322
当你给路由配置添加 `redirect` 属性时，它会告诉 Vue Router，如果访问了当前路径（`path`），则应该立即重定向到 `redirect` 指定的路径。在你提供的路由配置中，当你加上 `redirect: 'index'` 时，它表示如果用户访问了当前路由路径（`path: ''`），即根路径，那么会被重定向到 `index` 路径，这是你的默认路径。如果你希望根路径被访问时自动跳转到 `index` 路径，就添加 `redirect`，否则不添加。
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router重定向和路由别名的使用讲解
12-11
const router = new VueRouter({ routes: [ { path: '/a', component: A, redirect: '/b' } ] }); ``` 在这个例子中，当用户试图访问 `/a`，浏览器的 URL 将会自动更新为 `/b`，并且对应的组件 `A` 会渲染，...
vue-router重定向不刷新问题的解决
12-09
通过阅读vue-router的官方文档，发现重定向可以解决这个问题。 如之前文件路径是'/live/detail/id=7234'，'/skill/microList/',新项目路径是 '/s/live/detail?id=7234','/s/live/list' {path: '/live/list(/)?:foo'...
路由重定向——vue路由（四）
guoyp2126的博客
08-11 1万+
定义 重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其他位置。如：用户在商品页面,要购买商品服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到商品页面.又如：用户在个人中心,要修改密码服务器发现用户没登录,浏览器此时跳到登录页面,登录成功后返回到个人中心页面。 路由重定向需要使用到关键字Redirect和路由钩子函数（beforeEach(to, from, next)）来完成，下面通过一个具体的示例来做以说明。 示例 【例】打开web系统，系统一级菜单包括首页、我的、
vue-router 参数传递和重定向
qq_43470725的博客
01-23 3537
vue跳转路径时怎么进行参数传递 参考：https://router.vuejs.org/zh/guide/essentials/passing-props.html 代码演示 index.js路由js配置参数： import Vue from 'vue' import Router from 'vue-router' import Main from "../views/Main" import Login from "../views/Login" import UserList from "..
6-6.Vue-router之路由重定向
落叶的博客
02-06 2933
Vue-router 路由重定向redirect 路由重定向：一般用在不同的页面跳转到同一个页面或是同一组件的情况。 这时需要用到的是redirect参数，将要跳转的页面路径添加到redirect参数后。 在路由重定向时，有两种情况： 1.不携带参数进行路由重定向 例子：demo2页面重定向到demo页面 在src/router/index.js文件下增加demo2路由，这时不需要写compon...
vue-router——重定向-redirect、过渡动画、路由钩子
qq_35574727的博客
08-07 9888
一.vue-router的重定向-redirect 有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 export defa...
vue-router 多级路由redirect 重定向的问题
热门推荐
versionli的博客
06-27 8万+
在做多级路由的时候遇到很多问题，虽然不难，但是如果没有经验，往往要花一整天时间才能解决（可能我笨），况且网上资料也很少。项目需要是这样的： 登录页面跳到后台页面重定向，登录页是一级路由对应页面登录后：同时重定向二级和三级页面，这样登录就会重定向了，此时url但又有一个问题：当再次点击底部“堂食”的时候，url变成这样，并且三级页面没有出来解决办法是：在这个“堂食”按键 添加一个方法记住，也只...
vue-router 的重定向-redirect
weixin_30702413的博客
06-18 7742
1. 我们主要在index.js重新设置路由的重新定向redirect参数 index.js import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Params from '@/components/Par...
Vue 2.0 vue-router 路由重定向 传递参数
qinyuhua93的博客
03-15 7306
在开发Vue2.0 项目中，有一个需求是通过链接里面的页面参数跳转到固定的页面A，然后把其余的参数当做参数传到页面A，A处理逻辑 找了好久都没有解决，然后过了几天，换了种思路，就发现了其实在官网上其实已经说明了，  const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }}
vue-router之再一次理解redirect
qq_40202869的博客
08-22 4250
vue-router中的redirect代表重定向，但是看及改造vue-element-admin一次项目中深刻理解了一下。 语言匮乏，以图代职，一图胜千字。 1. vue-element-admin项目配置 2. 个人项目改造 项目的需求是显示项目名称datacenter，其他路由添加datacenter前缀，所以正确合理的配置，个人认为应该是： ...
【VUE】通过后端重定向到VUE的页面后，前端路由失效的解决方案！
李小白的博客
06-21 2万+
这个问题是我在做微信授权登录的时候遇到的。具体描述：用户打开页面后，路由拦截判断用户是否登录，如果未登录，则将用户的访问地址记录到localStorage里面，等待授权后重定向到该页面。当我使用location.href将页面跳转到后端地址，进行微信用户信息获取完成，由php后端通过header将页面重定向到我http://my.app.com/#/login 页面时，发现似乎并没有路由到logi...
vue中路由重定向redirect
weixin_39168052的博客
08-01 3万+
1.传参 重定向时传参，根据重定向到的路径进行传参 注意：重定向改变了路径，此时路径并不是goParams/1993/yq love zn而是params/1993/yq love znf 2.不传参 不传参直接重定向路径地址 注意：redirect重定向改变了url地址，如果重定向的地址需要接收参数然而没有传参不会改变地址，页面不会报错但是也不会显示内容  ...
vue-router 重定向配置简单操作
04-22
为了实现重定向，我们需要使用Vue Router的redirect功能。在路由配置文件中，我们可以使用redirect关键字指定重定向目标的路径。 例如，如果我们想要将路由从根路径"/"重定向到"/home"，我们可以这样配置路由： ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值