参考资料:vue.js官网  博客

vue-router传递参数分为两大类

编程式的导航 router.push
声明式的导航 <router-link>
编程式导航传递参数有两种类型:字符串、对象。

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:

this.$router.push("home");

对象

想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数,下面分别说明两种方式的用法和注意事项。

命名路由

命名路由的前提就是在注册路由的地方需要给路由命名如:

命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标页面接收传递参数时使用params

  • 特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的

使用方法如下:

this.$router.push({ name: 'news', params: { userId: 123 }})

代码如下:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
routerTo(){
this.$router.push({ name: 'news', params: { userId: 123 }});
}
}
}
</script> <style>
</style>

接受传递的参数:

<template>
<div>
this is the news page.the transform param is {{this.$route.params.userId}}
</div>
</template>
<script> </script>

查询参数

查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使用query。

  • 注意:和name配对的是params,和path配对的是query

使用方法如下:

this.$router.push({ path: '/news', query: { userId: 123 }});

代码如下:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
routerTo(){
this.$router.push({ path: '/news', query: { userId: 123 }});
}
}
}
</script>
<style>
</style>

接收参数如下:

<template>
<div>
this is the news page.the transform param is {{this.$route.query.userId}}
</div>
</template>
<script>
</script>

声明式的导航

声明式的导航和编程式的一样,这里就不在过多介绍,给几个例子大家对照编程式理解,例子如下:

字符串

<router-link to="news">click to news page</router-link>

命名路由

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

查询参数

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

最后总结:路由传递参数和传统传递参数是一样的,命名路由类似表单提交而查询就是url传递,在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了,最后总结为以下两点:

1.命名路由搭配params,刷新页面参数会丢失
2.查询参数搭配query,刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

vue-router传递参数的几种方式的更多相关文章

  1. Delphi过程函数传递参数的几种方式

    Delphi过程函数传递参数的几种方式  在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out. 另一种不加修饰符的为默认按值传递参数. 一.默认方式以值方式传递参数 proced ...

  2. 【delphi】Delphi过程、函数传递参数的八种方式

    Delphi过程函数传递参数的八种方式

  3. asp传递参数的几种方式

    把下列代码分别加入a.asp和b.asp的<body></body>中,点提交,就可以将a.asp文本框的内容传给b.asp并显示出来 a.ASP <form actio ...

  4. vue-router 传递参数的几种方式

    本文转载自:https://blog.csdn.net/crazywoniu/article/details/80942642 vue-router传递参数分为两大类 编程式的导航 router.pu ...

  5. shell 函数传递参数的几种方式

    1.最近总结了 shell 中 function 的传递变量的几种方式 1.传递单个变量 2.传递数组变量   #!/bin/bash   #trying to pass an variable.   ...

  6. Delphi过程函数传递参数的八种方式

    今天一同事问我为什么有些过程函数里面有Var而有些没有,不解,遂到网上百度,得解.快哉,快哉. 在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out.另一种不加修饰符的为默认按值传 ...

  7. vue router 传递参数

    vue-router 传参的方式 query 和params query 类似于get请求的传参方法 就是 ? 这种形式的 https://i.cnblogs.com/EditPosts.aspx?o ...

  8. JSP中页面向Action传递参数的几种方式

    <form name="ThisForm" method="POST" action="index.jsp"> form是表单, ...

  9. Mybatis传递参数的几种方式

    使用Map传递 优点:直接在sql中取出key即可 缺点:适用于小项目,不符合大公司规范 对象传递参数 优点:符合标准规范 缺点:麻烦 3.只有一个基本类型参数的情况下,直接在sql中取中 4.多个参 ...

随机推荐

  1. opendistro 试用

    以前转载过一篇别人的关于opendistro的文章,还好使用docker-compose 运行,很方便,所以自己也跑下 环境准备 docker-compose 文件 version: '3' serv ...

  2. python selenium-webdriver 执行js (八)

    使用python selenium 做自动化测试的时候其实我基本没有使用过执行js,只是在后来使用selenium来爬虫的时候使用到了,所以我在这里也就拿出来简单的介绍一下如何执行js. execut ...

  3. C语言之一维数组与指针

    一维数组: 假如有一维数组如下: ]; 该数组有3个元素,数据类型为char型,地址空间如下. 如果想访问数据,直接使用a[0].a[1].a[2]取出相应地址空间的值即可 一级指针: 指针即地址,c ...

  4. 第一次使用mybatis

    程序使用mybatis的步骤: 1.配置mybatis 涉及到的配置文件有conf.xml和与实体类对应的映射配置文件 (1) conf.xml:配置数据库信息和需要加载的映射文件 <confi ...

  5. USD词汇表(USD Glossary)

    这篇文章是在学习USD的过程中龟速写成的,目的是将USD的核心设计.相关概念的说明.以及配套API整理出来,为后续进行的USD开发工作提供中文资料支持. 实际上也只有充分理解了USD设计中的每一个知识 ...

  6. Introduction to Parallel Computing

    Copied From:https://computing.llnl.gov/tutorials/parallel_comp/ Author: Blaise Barney, Lawrence Live ...

  7. SSO+PHS 同步问题修正解决

    参照URL: https://blogs.technet.microsoft.com/latam/2018/03/27/using-the-consistencyguid/ https://chinn ...

  8. 使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求

    HTTP 请求的拦截技术可以广泛地应用在反向代理.拦截 Ajax 通信.网页的在线翻译.网站改版重构等方面.而拦截根据位置可以分为服务器端和客户端两大类,客户端拦截借助 JavaScript 脚本技术 ...

  9. css 优化

    // 注: 以下内容大量借阅自<<Webkit技术内幕>>--朱永盛(14年出版的) , 很多内容可能早已更新 , 因此个人并不能确定论述是否正确.部分摘录内容有删减 , 目录 ...

  10. nice team小组出山啦!(第二次会议)

    为什么niceteam小组一个月没有更新博客?因为我们正在埋头苦干.是的过去的一个月我们的小组成员正沉浸在知识的海洋中,今天是我们出山的好日子,特地记录一下我们的工作进度. 在项目经理的安排下,我们小 ...