每日技术总结: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 ...
随机推荐
- jquery07
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- BZOJ 1571 DP
思路: 预处理出在能力值为i的时候 滑雪一次的最小时间 f[i][j]表示i时间 j的能力值 最多的滑雪次数 我先用vector 把课程按起点push进去 1. for(int k=0;k<ve ...
- MyBatis映射
mybatis-config.xml映射文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- windows下go语言环境
1 liteIDE ,随便装哪儿都行 2 GO语言包 安装 ,我安装到了 c:\go (顺便给个地址下载地址 https://golang.org/dl/ ) 3 GCC编译器 安装,同 ...
- 去除inline-block元素间距
- CSS 文本样式
1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式 text-align <style> .text ...
- 洛谷——P2984 [USACO10FEB]给巧克力Chocolate Giving
https://www.luogu.org/problem/show?pid=2984 题目描述 Farmer John is distributing chocolates at the barn ...
- 从”茄子快传”看应用程序怎样获取手机已安装程序的apk文件
"茄子快传"是联想开发的一款近距离文件共享软件.它通过wifi-direct(速度飞快,不须要联网)或者普通的网络(速度慢)在不同手机间传递文件. 不知为何.它就火了起来,火的也飞 ...
- codecombat之边远地区的森林12-22关及地牢39关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- code -结合实例总结代码下拉流程
1.查看手机需要的版本 1)如果手机本来就可以正常工作,可以使用指令 zhangshuli@zhangshuli-MS-:~/Desktop/day_note/plan$ adb shell getr ...