今天貌似没什么问题,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. jquery07

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

  2. BZOJ 1571 DP

    思路: 预处理出在能力值为i的时候 滑雪一次的最小时间 f[i][j]表示i时间 j的能力值 最多的滑雪次数 我先用vector 把课程按起点push进去 1. for(int k=0;k<ve ...

  3. MyBatis映射

    mybatis-config.xml映射文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...

  4. windows下go语言环境

    1  liteIDE ,随便装哪儿都行 2  GO语言包 安装  ,我安装到了 c:\go  (顺便给个地址下载地址  https://golang.org/dl/  ) 3  GCC编译器 安装,同 ...

  5. 去除inline-block元素间距

  6. CSS 文本样式

    1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式    text-align <style> .text ...

  7. 洛谷——P2984 [USACO10FEB]给巧克力Chocolate Giving

    https://www.luogu.org/problem/show?pid=2984 题目描述 Farmer John is distributing chocolates at the barn ...

  8. 从”茄子快传”看应用程序怎样获取手机已安装程序的apk文件

    "茄子快传"是联想开发的一款近距离文件共享软件.它通过wifi-direct(速度飞快,不须要联网)或者普通的网络(速度慢)在不同手机间传递文件. 不知为何.它就火了起来,火的也飞 ...

  9. codecombat之边远地区的森林12-22关及地牢39关代码分享

    codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  10. code -结合实例总结代码下拉流程

    1.查看手机需要的版本 1)如果手机本来就可以正常工作,可以使用指令 zhangshuli@zhangshuli-MS-:~/Desktop/day_note/plan$ adb shell getr ...