vue-router 利用url传递参数

Posted 2023-03-09

参考技术A

原文链接： https://jspang.com/detailed?id=25#toc25

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

:冒号的形式传递参数 我们可以在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。我们在 /src/router/index.js 文件里配置路由。

我们需要传递的参数是新闻 ID（newsId） 和新闻标题 （newsTitle） 。所以我们在路由配置文件里制定了这两个值。

在 /components 目录下建立我们 params.vue 组件，也可以说是页面。我们在页面里输出了 url 传递的的新闻ID和新闻标题。

在 App.vue 文件里加入 <router-view> 标签。这时候我们可以直接利用url传值了。

我们已经实现了以 url 方式进行传值，这在实际开发中经常使用，必须完全了解。

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

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

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

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