vue-router 2.0 跳转之router.push()
router.push(location)
除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
router.push(location)
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。
声明式:<router-link :to="...">
编程式:router.push(...)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
// 字符串
router.push('home') // 对象
this.$router.push({path: '/login?url=' + this.$route.path}); // 命名的路由
router.push({ name: 'user', params: { userId: }}) // 带查询参数,变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: ""}}); // 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
.then(({data: {code, content}}) => {
if (code === ) {
// 对象
this.$router.push({path: '/home'});
}else if(code === ){
// 带查询参数,变成/login?stage=stage
this.$router.push({path: '/login', query:{stage: stage}});
}
}); // 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});
eplace
类型: boolean
默认值: false
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
//加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写:
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
router.push(location) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。 router.push(location) 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。
声明式:<router-link :to="..."> 编程式:router.push(...) 该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
// 字符串router.push('home')
// 对象this.$router.push({path: '/login?url=' + this.$route.path});
// 命名的路由router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成/backend/order?selected=2this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 设置查询参数this.$http.post('v1/user/select-stage', {stage: stage}) .then(({data: {code, content}}) => { if (code === 0) { // 对象 this.$router.push({path: '/home'}); }else if(code === 10){ // 带查询参数,变成/login?stage=stage this.$router.push({path: '/login', query:{stage: stage}}); }});
// 设计查询参数对象let queryData = {};if (this.$route.query.stage) { queryData.stage = this.$route.query.stage;}if (this.$route.query.url) { queryData.url = this.$route.query.url;}this.$router.push({path: '/my/profile', query: queryData});123456789101112131415161718192021222324252627282930313233replace 类型: boolean 默认值: false 设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。 //加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.push({path: '/home', replace: true})//如果是声明式就是像下面这样写:<router-link :to="..." replace></router-link>// 编程式:router.replace(...)--------------------- 作者:愤怒的小青春 来源:CSDN 原文:https://blog.csdn.net/qq_30114149/article/details/78416457 版权声明:本文为博主原创文章,转载请附上博文链接!
vue-router 2.0 跳转之router.push()的更多相关文章
- 【Vue】【Router】手动跳转用 this.$router.push() 时 $router 未定义的问题
初入Vue,手写路由跳转时的问题: toXxxRoute: () => { this.$router.push({'path': '/xxx', 'name': 'xxx'}) } 由于使用了箭 ...
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- [ vue ] quasar框架踩坑:在vue文件外导入路由,执行router.push('/')没有效果
问题描述: 1. 如图所示的项目结构目录, axios.js 文件负责拦截全局请求和回复,我在拦截回复的代码中写了:如果服务器回复了一个401错误,则执行Router.push('/'),但是该方法失 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
随机推荐
- 多线程13-CountdownEvent
); )); )); t1.Start(); t2.Start(); _coun ...
- PDFObject的使用(转)
1.pdfobject.js官网:https://pdfobject.com/ 2.在html文件中引入这个文件,以pdfobject.min.js为例 1 <script type=" ...
- O-超大型LED显示屏
Input 输入包含不超过100组数据.每组数据第一行为”START hh:mm:ss”,表示比赛开始时刻为hh:mm:ss.最后一行为”END hh:mm:ss”,即比赛结束时刻.二者之间至少会有一 ...
- Javascript高级面试
原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
- 【已解决】Error running 'xxx项目' Command line is too long(idea版)
[错误] Error running 'xxx项目': Command line is too long. Shorten command line for xxx or also for Sprin ...
- [UWP]CompositionLinearGradientBrush加BlendEffect,双倍的快乐
原文:[UWP]CompositionLinearGradientBrush加BlendEffect,双倍的快乐 1. 什么是BlendEffect# 上一篇文章介绍了CompositionLinea ...
- 剑指offer-用两个栈来实现一个队列-队列与栈-python
用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路:使用两个栈,stackA 用来接收node stackB 用来接收 stackA 的出栈 # -*- cod ...
- vue项目1-pizza点餐系统11-设计menu页面
菜单的页面设计是基于bootstrap实现的,主要用到的是table标签,其中获取data数据用到遍历. <template> <div class=""> ...
- 新建maven子模块 出现 Unable to read parent POM
新建maven子模块 出现 Unable to read parent POM错误 于是把pom.xml文件中的 中文字符全部删除 包括 注释 最后成功建立
- python multiprocessing模块
python multiprocessing模块 原文地址 multiprocessing multiprocessing支持子进程.通信和共享数据.执行不同形式的同步,提供了Process.Queu ...