vue-router参数传递

一:利用url传递参数(以 :冒号形式的形式传递参数)

具体用法:

1、在src/router/index.js路由配置文件里,以:冒号的形式配置参数:(这里需要传递的参数是 新闻ID(newsID)和新闻标题(newsTitle)):


image.png

2、在src/components目录下建立params.vue组件(页面),在页面里,输出新闻ID(newsID)和新闻标题(newsTitle):


image.png

3、最后在App.vue文件夹里写入<router-link>标签,方便直接利用url传值:
image.png

二:通过name传递参数(在开发中比较少用)

具体用法:

1、在路由文件src/router/index.js中配置name属性:


image.png

2、在模板(src/App.vue)里用$route.name的形式接收name值,直接在模板显示:


image.png

三:通过<router-link>标签中的to传值(推荐用to传值,开发中用得最多)

注意:这里的to要进行绑定,要写成:to


image.png

name:时路由文件中配置的name值

params:是要传递的参数,可以传递多个值(username:代表key值,'jspang'代表value值)

具体用法:

1、在src/router/index.js文件中给hi1配置的路由起个name,叫做hi1:


image.png

2、在App.vue文件中用<router-link>标签进行传参:


image.png

3、最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收:
image.png

效果图如下所示:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,099评论 19 139
  • 一.安装vue-router vue-router是一个插件包,所以我们还是需要用npm来进行安装的。打开命令行工...
    錢小强_阅读 2,062评论 0 9
  • 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用 标签编写链接哪?...
    浪里行舟阅读 67,794评论 12 203
  • name :路由的name与路径没关系,作用: meta:可以写任何你想要用到的东西,路由守卫详细说 chiild...
    Kuro233333阅读 547评论 0 1
  • 这是我第5篇简书。   由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面...
    东西里阅读 46,756评论 20 212