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"的标题时,参数不会被传递