码迷,mamicode.com
首页 > Web开发 > 详细

第5节:vue-router 利用url传递参数

时间:2018-01-15 00:23:53      阅读:701      评论:0      收藏:0      [点我收藏+]

标签:排列   tin   输出   show   目录   标题   十分   sid   row   

我们在第3节虽然已经学会传递参数,但是我们这些老程序员的情怀还是利用url来传值,因为我们以前在前后端没有分开开发的时候,经常这样做。在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。

:冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。

  1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

    我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。
  2. 在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
  3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

我们已经实现了以url方式进行传值,这在实际开发中经常使用,必须完全了解。我希望你看完视频后或者学完文章后能多练习两边,并在实际项目中充分使用。

正则表达式在URL传值中的应用

上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。

加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到。

 

第5节:vue-router 利用url传递参数

标签:排列   tin   输出   show   目录   标题   十分   sid   row   

原文地址:https://www.cnblogs.com/jinsuo/p/8284651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!