Vue-router 第5节 vue-router利用url传递参数
时间:2020-04-16
本文章向大家介绍Vue-router 第5节 vue-router利用url传递参数,主要包括Vue-router 第5节 vue-router利用url传递参数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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组件就没有办法接收到。
原文地址:https://www.cnblogs.com/Elva3zora/p/12711244.html
- 读书笔记(二)对象激活和上下文
- 程序员的噩梦有哪些?除了改需求,还有这些…
- UC Berkeley提出新型分布式执行框架Ray:有望取代Spark
- 卡奇话爬虫使用方法以及下载地址
- flash读取XML 背景自动适应大小
- 记录一个发邮件的cs文件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
- xml-rpc(2)-first demo_v2
- xml-rpc(1)-first demo
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
- 网站源文件被注入了iframe代码—ARP欺骗的木马病毒攻击
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法