每日技术总结:vue router传参方式,js获取设备高度
今天貌似没什么问题,23333……
1.vue router 路由传参的方式
应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品分类名称(catName)两个参数,列表页通过路由信息拿到catId,去请求列表内容接口。
路由文件js代码如下:
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
path: '/list',
name: 'list',
component: list
},
{
path: '*',
redirect: '/'
}
]
})
list表示商品列表页的路由,这里可以不写任何传参的东西
(1)path+query方式
接下来请看分类页的代码:
分类页(category.vue),methods里面页面跳转代码如下:
// category.vue
methods: {
toList(catId, catName) {
this.$router.push({
path: 'list',
query: {
catId: catId,
catName: catName
}
})
},
}
浏览器URL是这样的 http://localhost:8080/#/list?catId=33&catName=%E8%BF%9E%E8%A1%A3%E8%A3%99
(因为这俩参数也不是什么秘密,所以暴露就暴露了吧)
在列表页(list.vue)created钩子函数里面打印路由信息:
// list.vue
created () {
console.log(this.$route)
})
能看到跳转过来的路由信息:
(2)name + params 方式
路由文件js代码不变
分类页category.vue代码如下:
toList(catId, catName) {
this.$router.push({
name: 'list',
params: {
catId: catId,
catName: catName
}
})
},
浏览器URL是这样的 http://localhost:8080/#/list (不会显示参数)
路由信息如下:
这个方法有个问题,第一次从分类页跳转到列表页没有问题,params是有东西的,我可以正常拿到catId去请求列表接口。但是如果刷新一次列表页,路由信息里面params空了。就无法拿到catId,无法请求内容。。所以,还是第一种方法好,虽然url暴露了参数,但至少可以正常使用。
(3)不知道叫什么,直接看代码:
//?问号的意思是该参数不是必传项
//多个参数用/:id连接
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
path: 'test/:name?',
name: 'test',
component: 'test.vue',
props: true,
},
参考文章: https://www.jianshu.com/p/2be6f131cec5?tdsourcetag=s_pcqq_aiomsg (这一篇写得还不错,可以看看)
2.js设置容器高度
情景介绍:这是个商品列表页,我用了better-scroll来滚动列表内容。html代码结构如下:
<div class="scroll-wrapper" ref="listScroll" :style="scrollWrapperStyle">
<ul class="list-ul">
<li>
<!-- ... -->
</li>
</ul>
</div>
容器(scroll-wrapper)高度默认和里面的内容(list-ul)一样高,这可不行,这就没法触发better-scroll滚动。
我需要给容器(scroll-wrapper)一个固定高度,除去顶部header的高度,剩下的高度都要给它。。这就需要动态检测设备高度了
js部分代码如下:
data() {
return {
scrollWrapperStyle: {
height: (window.screen.height - 50) + 'px'
}
}
},
3.其他好像没啥问题。
4.今天顺利地开发了很多东西。
vue路由也整明白了。vue电商项目,完成了分类页、列表页、详情页。
项目github地址:https://github.com/2768533792/vue-ec
5.加油
每日技术总结:vue router传参方式,js获取设备高度的更多相关文章
- vue的传参方式和router使用技巧
vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...
- vue router 传参 获取不到query,params
千万要注意,获取query/params 是this.$route.query 不是this.$router.query!!!
- VUE -- router 传参和获取参数
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
随机推荐
- php中array_merge函数
php中array_merge函数 一.array_merge简介 (PHP 4, PHP 5, PHP 7) array_merge — 合并一个或多个数组 说明¶ array array_merg ...
- Lua 是一个小巧的脚本语言
Redis进阶实践之七Redis和Lua初步整合使用 一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运 ...
- vue (v-if show 问题)
vue中的显示和隐藏有两种方式 1.v-if ( 相当于动态创建的标签,在html 结构中,是不存在的. ) 2. v-show(控制的是 html 的css display:none 属性.结 ...
- css+ js 实现圆环时钟
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- SQL事务+异常
BEGIN TRAN BEGIN TRY --这里写代码 --这里写代码 END TRY BEGIN CATCH ROLLBACK TRAN END CATCH COMMIT TRAN
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
- JS 在HTML页面显示当前日期
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) D】Bash and a Tough Math Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于1操作 令len = r-l+1 等价于查找l..r这个范围内x的倍数的个数是否大于等于len-1 也即l..r这个范围内不是x ...
- 洛谷——P1314 聪明的质监员
https://www.luogu.org/problem/show?pid=1314 题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每 ...
- 8lession-基础类型转化
Python数据类型转换 有时候,我们需要对数据内置的类型进行转换,数据类型的转换,你只需要将数据类型作为函数名即可. 以下几个内置的函数可以执行数据类型之间的转换.这些函数返回一个新的对象,表示转换 ...