路由传参-使用 params 方式传递路由参数|学习笔记

简介: 快速学习路由传参-使用 params 方式传递路由参数

开发者学堂课程【Vue.js 入门与实战路由传参-使用 params 方式传递路由参数】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8198


路由传参-使用 params 方式传递路由参数


内容介绍

一、 路由规则传参

二、 修改参数

 

一、路由规则传参

Var router =new vuerouter({Routes:[{path:’/login/:id’, component: login},{path:’/register’, component: register }  ]}) <router-link to="/login/12”/is >登录</router-link><router-link to="/register">注册<router-1ink><router -view></ router-view></div>

此时右键浏览,可以正常展示:

1666939380560.jpg

接下来实践,把解析到的 id 放到网页当中去。

通过分析,可以发现, id 12 之所以能被解析出来,是因为 matched ,在 matched 内部有一个路由匹配规则, path 是自己手写的, matched 把 path 内部预解析成了表达式。用表达式继续去解析 fullpath ,接续出来的结果,可以给到 params 。

如果想要拿到 id 这个shuju,需要通过如下代码:

created(){//组件的生命周期钩子函数

console.log(this.$route.parama.id)

}

}

var login={

template: ‘<h1>登录--- {{$route.parama.id}}--- {{ $route.params.name}} </h1> ’,

 此时执行发现已经可以正常传递了。

 

二、修改参数

把在login中的登录里面的--- {{$route . query id }} --- 1 Sroute . query . name}}删掉,在把router-vue中登录的?id=10&name=zs删掉。在第二传参中,把规则改一下,把path里面的login后面添加/:id,在后面就当作id把它解析出来,在跳转的时候在后面跟一个id号。

执行发现不可匹配。

把console.og(this.$router 放出来,在到前端去看看:(图形如下:)

想要显示出id来,把console.og(this.$router)改为这个console.og(this.$router.params.id)。

将来在开发中,两种传参方式都可以使用,主要依据个人喜好选择即可。

相关文章
|
计算机视觉 Python
OpenCV形态学运算中梯度运算、顶帽、黑帽运算讲解与实战应用(附Python源码)
OpenCV形态学运算中梯度运算、顶帽、黑帽运算讲解与实战应用(附Python源码)
493 0
|
Kubernetes Java 关系型数据库
云原生之Kubernetes 集群部署nacos 1.4(集群版)
注册中心是微服务架构最核心的组件。它起到新服务节点的注册与状态维护的作用。微服务节点在启动时会将自身的服务名称、IP、端口等信息在注册中心中进行登记,注册中心会定时检查该节点的运行状态。注册中心通常会采用心跳机制最大程度保证其持有的服务节点列表都是可用的。
1040 1
云原生之Kubernetes 集群部署nacos 1.4(集群版)
|
9月前
|
存储 前端开发 Java
Harry技术添加存储(minio、aliyun oss)、短信sms(aliyun、模拟)、邮件发送等功能
### SpringBoot3 + Vue3 前后端分离的Java快速开发框架更新 本次更新主要包含以下内容: 1. **端口修改**:为避免与Minio存储服务冲突,后端启动端口从9000改为9999。 2. **添加存储支持**:集成Minio和阿里云OSS对象存储服务,详细配置请参考相关文档。 3. **短信服务**:接入阿里云短信服务,并增加模拟发送功能,方便本地测试。 4. **邮件发送**:引入邮件发送功能,支持简单文本邮件和带附件邮件。 5. **完善个人中心**:优化个人中心页面,提升用户体验。
329 85
Harry技术添加存储(minio、aliyun oss)、短信sms(aliyun、模拟)、邮件发送等功能
|
Java 开发者
Java中的并发编程:深入理解synchronized关键字
在Java并发编程的领域中,synchronized关键字是实现线程同步的基础工具之一。本文将深入剖析synchronized的作用机制,探讨其在多线程环境下确保数据一致性的重要性,并通过实际案例展示其应用。同时,文章还将比较synchronized与Lock接口的不同之处,以助于开发者更好地选择适合自己场景的同步策略。
143 29
|
8月前
|
JavaScript 前端开发 算法
🚀【程序员必备】Qwerty Learner:打造英语输入与单词记忆的神器
Qwerty Learner 是一款专为键盘工作者设计的开源软件,结合单词记忆与英语输入练习,提升英语水平和打字速度。内置丰富词库(如 CET-4/6、GRE、编程API等),提供音标发音、默写模式、速度正确率统计等功能,适合学生、职场人士及程序员使用。
3769 17
|
11月前
|
人工智能 自然语言处理 安全
Claude官网中文版:在国内使用claude AI的最佳选择!
Claude 是 Anthropic 公司开发的一款大型语言模型,类似于 OpenAI 的 ChatGPT 或 Google 的 Bard。它被设计成一个乐于助人 😊、诚实 🤝 且无害 😇 的 AI 助手。
|
12月前
|
JavaScript 前端开发 程序员
动态语言、静态语言、强类型语言、弱类型语言的区别
动态语言、静态语言、强类型语言、弱类型语言的区别
|
存储 数据库 监控
|
机器学习/深度学习 监控 自动驾驶
基于深度学习的动态场景理解
基于深度学习的动态场景理解是一种通过计算机视觉技术自动分析和解释动态环境中物体、事件和交互的能力。该技术在自动驾驶、智能监控、机器人导航、增强现实等领域有着广泛应用。
305 1
|
DataWorks 监控 关系型数据库
利用 DataWorks 数据推送定期推播 MySQL 或 StarRocks Query 诊断信息
DataWorks 近期上线了数据推送功能,能够将数据库查询的数据组织后推送到各渠道 (如钉钉、飞书、企业微信及 Teams),除了能将业务数据组织后推送,也能将数据库自身提供的监控数据组织后推送,这边我们就以 MySQL (也适用于StarRocks) 为例,定期推播 MySQL 的数据量变化等信息,帮助用户掌握 MySQL 状态。
275 1