vue2.0中的路由传值

2024-05-11 05:42:34

vue2.0中的路由传值

传参的三种基本用法

第一种字符串拼接

//第一步：路由表 src/router/index.js
{
path: ‘/user/:userId?’, // 传参第一步：在路由表当中找到目标路由。（相当于形参）
component: user,
name: ‘User’
}
//第二步：在目标路由中的router-link组件中传递具体的参数
<router-link :to="'/user/' + item.id " v-for="(item, index) in userList" :key="index">{{ item.userName }}</router-link>
// 第三步：接收方式，通过 r o u t e 进行参数的接收 t h i s . route进行参数的接收 this. route进行参数的接收this.route.params

第二种 path和query

//第一步：路由表 src/router/index.js
{
path: ‘/user/:userId?’, // 传参第一步：在路由表当中找到目标路由。（相当于形参）
component: user,
name: ‘User’
}
//第二步：在目标路由中的router-link组件中传递具体的参数
<router-link :to="{ path: '/user', query: { userId: item.id } }" v-for="(item, index) in userList" :key="index">{{ item.userName }}</router-link>

// 第三步：接收方式，通过 r o u t e 进行参数的接收 t h i s . route进行参数的接收 this. route进行参数的接收this.route.query

第三种name和params

//第一步：路由表 src/router/index.js
{
path: ‘/user/:userId?’, // 传参第一步：在路由表当中找到目标路由。（相当于形参）
component: user,
name: ‘User’
}
//第二步：在目标路由中的router-link组件中传递具体的参数
<router-link :to="{ name: 'User', params: { userId: item.id } }" v-for="(item, index) in userList" :key="index">{{ item.userName }}</router-link>
// 第三步：接收方式，通过 r o u t e 进行参数的接收 t h i s . route进行参数的接收 this. route进行参数的接收this.route.params

query传参与params传参的区别

地址栏不同

query：?key=value

params:/value

接受方式不同

query：this.$route.query

params:this.$route.params

使用场景的不同

query一般用在搜索

params一般用在详情页

本篇笔记作者：局部地区有黑洞！！

vue2.0中的路由传值相关推荐

vue2.0中的$router 和 $route的区别
vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $rou ...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
Vue2.0通过二级路由实现页面切换
vue2.0通过二级路由实现页面切换需求分析:以下歌手列表(singer.vue)页中,点击列表跳转到歌手详情页(singer-detail.vue). 实现方法:使用二级vue-router实现. ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue2.0中关于active-class
vue2.0中关于active-class 一.active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换: 官方文 ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
Vue2.0中的事件修饰符
Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...
百度Apollo7.0中的路由段是什么
百度Apollo是一个自动驾驶开发平台,Apollo 7.0 中的路由段是指由路线规划系统生成的,用于指导车辆行驶的路径.路由段是在地图数据中表示的道路的一部分,并且通常由一系列地理坐标点组成.路由段 ...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我 ...

最新文章

热门文章