vue路由跳转的多种方式
1.router-link to 跳转
<router-link to="/child"><button>跳转</button></router-link>
2.this.$router.push("ComponentName") ,通过路由名称跳转
<button @click="go()">跳转</button>
go(){
this.$router.push("Child");
},
3.this.$router.push({path:"/child"}) ,通过路由的path跳转
<button @click="go2()">跳转</button>
go2(){
this.$router.push({path:"/child"});
},
4.带参数跳转 this.$router.push({path:"/child",params:{test:123}})
<button @click="go3()">带参数跳转</button>
go3(){
this.$router.push({path:"/child?test=123"})
},
这种跳转的路由地址和参数是这样的,用问号拼接的,
获取路由参数,this.$route.query.paramsName
<button @click="getParams()">获取路由参数</button>
getParams(){
console.log(this.$route.query.test); //
}
5.跳转到上一个路由,this.$router.go(-1)
<button @click="goback()">返回上一页</button>
goback(){
this.$router.go(-1);
}
6.命名路由的跳转,需要在配置路由上带上参数,<router-link :to={name:'ComponentName',params:{test:123}}></router-link>
{
name:"Children",
path:"/children/:test",
component:Children
}
<router-link :to="{name:'Children',params:{test:123}}"><button>跳转带参数</button></router-link>
这种跳转的路由地址和参数是这样的,用 / 拼接的,
获取路由参数:this.$route.params.xxx
<button @click="getParams()">获取路由参数</button>
getParams(){
console.log( this.$route.params.test);
}
vue路由跳转的多种方式的更多相关文章
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- vue 路由跳转带参 方式query ,params
a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...
- vue路由跳转的方式
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. t ...
- Vue通信、传值的多种方式,详解
Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...
- vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
- 去除vue路由跳转地址栏后的哈希值#
去除vue路由跳转地址栏后的哈希值#,我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# mode:"history" import ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- Vue通信、传值的多种方式,详解(都是干货)
Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287
随机推荐
- CodeForces - 873B Balanced Substring(思维)
inputstandard input outputstandard output You are given a string s consisting only of characters 0 a ...
- 项目总结09:select标签下封装option标签
项目中经常用到Select标签,用封装好的方法获取option,可以避免冗赘的代码: 1.JSP--标签 <select class="width_md" name=&quo ...
- 【Linux 线程】线程同步《三》
1.条件变量 条件变量是利用线程间共享的全局变量进行同步的一种机制,主要包括两个动作:一个线程等待"条件变量的条件成立"而挂起:另一个线程使"条件成立"(给出条 ...
- [leetcode]528. Random Pick with Weight按权重挑选索引
Given an array w of positive integers, where w[i] describes the weight of index i, write a function ...
- AngularJS——第4章 数据绑定
第4章 数据绑定 AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中. 所谓数据绑定指的就是将模型(Model)中 ...
- 自动发现项目中的所有URL
我的rbac组件,是想用到任何一个,项目中的. so 问题来了. - 问题: 拿到一个项目. 怎样获取到,当前项目中, 所有的URL 以及 每个URL的别名name, 还有是有 namespace 命 ...
- 【gRPC使用问题4】
1.进行gRPC服务调用出错:服务不可用 2.解决方案: linux系统部署的节点服务的确不可用,愿意是 系统是泡在虚拟机里面, 计算核数只有一核,太小,服务没有跑起来.
- 单元测试使用spring注解获取bean
在实际项目开发中经常会有单元测试,单元测试中经常会用类似这样的代码片段获取spring管理的bean @Test public void testSendEmail(){ MessageService ...
- (转)Android学习-使用Async-Http实现图片压缩并上传功能
(转)Android学习-使用Async-Http实现图片压缩并上传功能 文章转载自:作者:RyaneLee链接:http://www.jianshu.com/p/940fc7ba39e1 让我头疼一 ...
- [中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理
[中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理 Introduction to DPDK: ...