VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式

跳转方式1:.使用便签跳转, <router-link to="{path:‘路由地址‘,params:{传的数据},query:{传的参数}" >;
跳转方式2:导航跳转,{
在路由内 (路由对象) router.push({
  path:‘路径‘,//具有导航功能
  name:‘路由名称’,,//同样具有导航功能
  params:{传的数据},
  query:{传的参数}"
});
在组件内 (路由对象)this.$router.push(参数同上);

传参方式1:query:{传的参数}",会显示在url上,类似get请求传参,也可跟在path后面,目标路由获取方法:this.$route.query.id;
传参方式2:params:{传的参数}",不会显示在url上,类似post请求传参,不可跟在path后面,目标路由获取方法:this.$route.params.id;
注意:this.$route与this.$router的区别:
$route为当前router跳转对象里面可以获取name、path、query、params等;
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法;
前者用于‘获取传递的参数’,后者用于‘路由导航’;

原文地址:https://www.cnblogs.com/llslmb/p/10880057.html

时间: 2024-11-06 09:51:29

VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式的相关文章

【前端小小白的学习之路】vue学习记录④(路由传参)

通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中我们已经有两个页面(Helloworld.vue&Hello.vue),现在我准备往Hello.vue里面添加3个链接,分别对应两种情况的跳转.  第一步:在原来的Hello.vue里添加路由链接跳转的代码(见第38-44行代码),添加后的Hello.vue代码如下: 1 <template&g

vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面开发模式. 2. 路由在web 有两种: 第一种 hash hash值前面带 # "  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string  #hash " 第二种是 h

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

Objective-C学习笔记(八)——高级跳转语句goto使用方法

在我们学习C语言的时候,碰到一种程序跳转,叫做goto,goto可以跳到程序的任意地方.又到了后来,学习了程序设计方法学,不知哪一位计算机前辈(貌似是迪杰斯特拉),认为goto使得程序的跳转过于随意,使代码的逻辑变得混乱,所以不推荐使用goto.现在来到OC,在OC中也有goto,为了学习的完整性,我们也来学习下这种相对高级的跳转. (一)代码一: int main(int argc, const char * argv[]) { @autoreleasepool { int a=0; star

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

vue学习第四天

一:路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link>

Vue 学习之 vue-router2

---恢复内容开始--- 一.路由的安装: npm安装 npm install vue-router --save 执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖. 注:若从GitHub或他人的项目,安装项目时只需要执行npm install即可下载并完成安装该项目所有的依赖. package.json "dependencies": { ... "vue-router": "^2.1.1"

如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter

PS 感谢大家的关注,由于我本想开源4个库,除了router, 另外三个分别是native dispatcher, web dispatcher 和 react dispatcher , 所以router 对native dispatcher 有了库依赖,为了共同学习,我把router单独分离成pod,再次感谢大家的关注,欢迎叫router更完善.best regards. 如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter @author Jou Email Wei

[转]如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter

转自:http://www.jianshu.com/p/d6a246752ca5 预热 - 我要解决的问题 首先我还是要推荐Gaosboy的这篇文章解耦神器 —— 统跳协议和Rewrite引擎文章中,介绍了天猫app,基于文件配置和uri的页面跳转.这大大增加了app端的灵活性, 而这种实现很类似今天的前端或后端开发中的 静态路由 和 动态路由协议.除了天猫,在很多的客户端架构的文章中,路由解耦的案例并不不少见,如携程移动App架构优化之旅蘑菇街App的组件化之路原生路由协议, 其实两年前就有了