vue.js前端开发VUE技术与项目

Vue-router 利用url传递参数

2019-07-12  本文已影响0人  Rising_life

在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。

:冒号的形式传递参数

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

首先创建 新闻页(News.vue)和 新闻详情页(NewInfo.vue)

在/src/router/index.js文件里配置闻详情页(NewInfo.vue)路由,需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以在路由配置文件里制定了这两个值。

在 新闻页(News.vue)加入 <router-link> 标签,利用 url 进行传值

在新闻详情页(NewInfo.vue)页面里输出了url传递的的新闻ID和新闻标题。

当在 新闻页 点击 该新闻标题时,会将 该新闻的 ID 和 Title 传递给 新闻详情页

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

vue支持正则,在我们传递的新闻ID只能是数字时,需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入正则。

在新闻页(News.vue)修改 ID 3 为字符串 "ID"

当我们点击 id为"ID"的标题时,参数不会被传递

上一篇下一篇

猜你喜欢

热点阅读