路由传参-使用 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)。

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

相关文章
|
20天前
|
网络架构
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
|
20天前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
20天前
|
JavaScript 前端开发 网络架构
Vue-router的动态路由:获取传递的值
Vue-router的动态路由:获取传递的值
|
20天前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
13 0
|
20天前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
25 0
|
20天前
|
网络架构
定义vue-router的动态路由以及如何获取传过来的动态参数
定义vue-router的动态路由以及如何获取传过来的动态参数
50 1
|
20天前
|
负载均衡 JavaScript 网络协议
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
route和router的区别,怎么定义vue-router的动态路由?怎么获取传过来的值
66 1
|
6月前
|
JavaScript 网络架构
Vue 路由器传参和取值 路径参数
Vue 路由器传参和取值 路径参数
|
9月前
|
存储 小程序
小程序路由传参的方法
小程序路由传参的方法
251 0
|
12月前
|
JavaScript
Vue —— 进阶 vue-router 路由(一)(嵌套路由、query参数、命名路由、params参数、props配置)
Vue —— 进阶 vue-router 路由(一)(嵌套路由、query参数、命名路由、params参数、props配置)