如果组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数

<template>
<div>
<h3>首页</h3>
<router-link :to="{ path:'/home/chee', query: { num: 1} }">
<button>点击<tton>
</router-link>
<router-view></router-view>
</div>
</template>

这是子路由中通过 this.$route.query.num 来显示传递过来的参数URL显示(http://localhost:8080/#/home/chee?num=1)

<template>
<h3>农药王者{{ this.$route.query.num }}</h3>
</template>

vue路由传参(学习心得)的更多相关文章

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

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

  2. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

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

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

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

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

  5. vue路由传参并跳转页面

    在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...

  6. vue路由传参页面刷新参数丢失问题解决方案

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

  7. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  8. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  9. vue动态路由配置,vue路由传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...

  10. vue 路由传参

      mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由   2.history路由 不会带#的     单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...

随机推荐

  1. PLU Decomposition

    PLU分解的优点是,能够将Ax=b的矩阵,转换成Ly=b, Ux = y 的形式.当我们改变系数矩阵b时,此时因为矩阵L和U均是固定 的,所以总能高效的求出矩阵的解. // LU.cpp : Defi ...

  2. HDU3367 Pseudoforest 【并查集】+【贪心】

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) To ...

  3. io口的作用

    I/O接口的作用     主机与外界交换信息称为输入/输出(I/O).主机与外界的信息交换是通过输入/输出设备进行的.一般的输入/输出设备都是机械的或机电相结合的产物,比方常规的外设有键盘.显示器.打 ...

  4. Android自己定义无下划线ClickableSapn超链接文本样式

    近期在做评论的时候须要实现这样的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamF2X2ltYmE=/font/5a6L5L2T/fontsize/ ...

  5. JS重名解决方案

    一个页面如果引用多个JS,或者像ASP.NET MVC,一个视图包含多个子视图,每个子视图有自己的JS,那么变量.函数的重名冲突机会将会大增. 如何解决? 这里有一个方案: 1.用类来封装子页的JS代 ...

  6. c# 获取根节点的属性信息

    <?xml version="1.0" encoding="UTF-8"?> <!--课程封面信息 --> <GK version ...

  7. 最大heap

    1 什么是最大heap 最大heap是一棵完全二叉树.每棵子树的根比它的两棵子树上的节点都要大. 2 建堆的过程 function max_heaptify(A): for (i = n/2向下取整: ...

  8. ImportError: cannot import name _imaging

    python - No module named 'PIL' - Stack Overflow  https://stackoverflow.com/questions/49247310/no-mod ...

  9. 一张图轻松记住PHP的*类*以及private和protected的区别

    上图概要的说了下php类的特性,类的方法同属性类似. 图中B类继承自A类,B是A的子类,$x和$y都是B的实例化对象. 1. 原型引用:[A::    . B::   ],仅限public stati ...

  10. flask-migrate 数据迁移

    作用:做数据库迁移依赖:flask-script flask-sqlalchemy 使用 项目结构 manage.py(其它文件内容与flask-sqlalchemy中一样) from s8day13 ...