首页 > 其他 > 详细

第3节:vue-router如何参数传递

时间:2018-01-14 15:46:46      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:方法   log   mini   程序   int   str   来看   bsp   名称   

原文网址:http://jspang.com/2017/04/13/vue-router/

开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航)。

一、用name传递参数

前两节课一直出现name的选项,但是我们都没有讲,这节课我们讲name的一种作用,传递参数。接着上节课的程序继续编写。

两步完成用name传值并显示在模板里:

  1. 在路由文件src/router/index.js里配置name属性。
  2. 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

     

二、通过<router-link> 标签中的to传参

也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

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

 

总结:

今天我们学习了两种传参的方法,一般会使用第二种方法。我们通过学习也知道了name的用途,一种作用是传参,一种作用是在传参时起到名称作用。传参的操作在实际开发中是基本的需求,我们一定要掌握好啊。

第3节:vue-router如何参数传递

标签:方法   log   mini   程序   int   str   来看   bsp   名称   

原文:https://www.cnblogs.com/jinsuo/p/8283336.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号