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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 快速学习路由传参-使用 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)。

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

相关文章
|
6月前
|
网络架构
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
|
8天前
|
Python
路由系统中的 path 函数有哪些可选参数?
路由系统中的 path 函数有哪些可选参数?
24 7
|
5月前
请说出路由传参和获取参数的三种方式
请说出路由传参和获取参数的三种方式
39 1
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
89 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
JavaScript 网络架构
路由传参及跳转方式
路由传参及跳转方式
|
4月前
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
219 4
|
6月前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
6月前
|
JavaScript 前端开发 网络架构
Vue-router的动态路由:获取传递的值
Vue-router的动态路由:获取传递的值
|
6月前
|
网络架构
定义vue-router的动态路由以及如何获取传过来的动态参数
定义vue-router的动态路由以及如何获取传过来的动态参数
257 1
|
6月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
115 0