今天貌似没什么问题,23333……


1.vue router 路由传参的方式

应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品分类名称(catName)两个参数,列表页通过路由信息拿到catId,去请求列表内容接口。

路由文件js代码如下:

export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
   {
 
    path: '/category',
 
name: 'category',
 
component: category
 
},
      {
      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获取设备高度的更多相关文章

  1. vue的传参方式和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...

  2. vue router 传参 获取不到query,params

    千万要注意,获取query/params 是this.$route.query 不是this.$router.query!!!

  3. VUE -- router 传参和获取参数

  4. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  5. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  7. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

随机推荐

  1. php中array_merge函数

    php中array_merge函数 一.array_merge简介 (PHP 4, PHP 5, PHP 7) array_merge — 合并一个或多个数组 说明¶ array array_merg ...

  2. Lua 是一个小巧的脚本语言

    Redis进阶实践之七Redis和Lua初步整合使用 一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运 ...

  3. vue (v-if show 问题)

    vue中的显示和隐藏有两种方式 1.v-if   ( 相当于动态创建的标签,在html 结构中,是不存在的. ) 2. v-show(控制的是 html 的css display:none  属性.结 ...

  4. css+ js 实现圆环时钟

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. SQL事务+异常

    BEGIN TRAN BEGIN TRY --这里写代码 --这里写代码 END TRY BEGIN CATCH ROLLBACK TRAN END CATCH COMMIT TRAN

  6. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  7. JS 在HTML页面显示当前日期

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

  8. 【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 ...

  9. 洛谷——P1314 聪明的质监员

    https://www.luogu.org/problem/show?pid=1314 题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每 ...

  10. 8lession-基础类型转化

    Python数据类型转换 有时候,我们需要对数据内置的类型进行转换,数据类型的转换,你只需要将数据类型作为函数名即可. 以下几个内置的函数可以执行数据类型之间的转换.这些函数返回一个新的对象,表示转换 ...