Vue-router 第5节 vue-router利用url传递参数
2024-09-02 19:05:06
Vue-router 第5节 vue-router利用url传递参数
第5节 vue-router利用url传递参数
我们在第3节虽然已经学会传递参数，但是在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。
冒号的形式传递参数
我们可以在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
- 在配置文件里以冒号的形式设置参数。我们在
/src/router/index.js文件里配置路由。
{
path:'/params/:newsId/:newsTitle',
component:Params
}
我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）。所以我们在路由配置文件里制定了这两个值。
- 在
src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
<template>
<div>
<h2>{{msg}}</h2>
<p>新闻ID：{{$route.params.newsId}}</p>
<p>新闻标题：{{$route.params.newsTitle}}</p>
</div>
</template>
<script>
export default {
name:'params',
data(){
return{
msg:'params pages'
}
}
}
</script>
注：在template元素里必须有一个包裹元素，例如div，如果赤裸裸将我们的<p>新闻ID：{{$route.params.newsId}}</p>、<p>新闻标题：{{$route.params.newsTitle}}</p>放在template里会报错。
- 在App.vue文件里加入我们的
<router-view>标签。这时候我们可以直接利用url传值了。
<router-link to="/">Home</router-link>
<router-link to="/params/160/daisy website is very good">params</router-link>
可以在页面中看到：
点击params：
我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。
正则表达式在URL传值中的应用
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
path:'/params/:newsId(\\d+)/:newsTitle',
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。
最新文章
- HTML 字符实体 &lt; &gt: &amp;等
- 点击显示div
- eap
- JQuery Event属性说明
- HDU3341 Lost's revenge(AC自动机&&dp)
- python 入门实践之网页数据抓取
- kali的openvas安装 留下笔记
- Android实例-打电话、发短信和邮件，取得手机IMEI号(XE8+小米2)
- 设计模式——工厂模式 （C++实现）
- C#语法糖之第五篇: 泛型委托- Action<T>
- jetty服务器访问系统的域名
- poj1936---subsequence（判断子串）
- Oracle数据库插入数据出错：ORA-06550
- 基于binlog来分析mysql的行记录修改情况（python脚本分析）
- (二)文档请求不同源之window.name跨域
- 屏蔽登录QQ后总是弹出的QQ网吧页面
- 斯坦福大学公开课机器学习： advice for applying machine learning - evaluatin a phpothesis（怎么评估学习算法得到的假设以及如何防止过拟合或欠拟合）
- MySQL最优配置模板（ 5.6&5.7）（运维那点事）
- SQL Server 对字符进行排序(数字类的字符)
- 【OCR技术系列之六】文本检测CTPN的代码实现