vue路由传参分为两种情况:

一、query和params传参的区别:

1、query传参显示参数,params传参不显示参数,params相对于query来说较安全一点。

2、取值方法也有不同:query取值:this.$route.query.XXX || this.$route.params.xxx

3、query传值页面刷新数据还在,而params传值页面数据消失。

二、各自写法:

query

组件写法(help.vue):

方式一:

方式二:

接受写法(home.vue)

页面渲染(home.vue):

query参数赋值到data:

params:

组件写法(about.vue):

方式二:

路由写法:

接受写法:

页面渲染:

路由传参 query 和 params的更多相关文章

  1. vue路由传参query和params的区别(详解!)

    1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...

  2. Vue-路由传参query与params

    注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...

  3. vue-router路由动态传参query和params的区别

    1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...

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

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

  5. vue链接传参与路由传参

    1.链接传参: 例如:链接是:http://localhost:3333/#/index?id=001 我们要获取参数:console.log(this.$route.query.id):即可 2.路 ...

  6. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

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

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

  8. vue 路由传参

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

  9. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

随机推荐

  1. CentOS7 Redis5.0.5环境搭建

    CentOS7 Redis5.0.5环境搭建 1基本环境配置 CentOS Linux release 7.6.1810 (Core) redis 5.0.5 1.下载解压redis.通过wget在官 ...

  2. 一致性hash (PHP)

    <?php /** * Flexihash - A simple consistent hashing implementation for PHP. * * The MIT License * ...

  3. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  4. 视频作品《springboot基础篇》上线了

    1.场景描述 第一个视频作品出炉了,<springboot基础篇>上线了,有需要的朋友可以直接点击链接观看.(如需购买,请通过本文链接购买) 2. 课程内容 课程地址:https://ed ...

  5. js中try、catch、finally的执行规则

    首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现黄色的叹号,这是正常的,这也不是最重要的,最重要的是,出错行以下的所有JS代码将中停执行 ...

  6. django安装以及配置

    一.django的安装和启动 1.安装 pip3 install django==1.11.22 目前来讲1.11.22版本比较稳定 2.django的创建 命令行:cmd先去到django创建目录, ...

  7. JVM参数的配置及意义

    JVM参数设置.分析 因为在工作中遇到了JVM参数的配置,不明白,网上搜索发现一篇好文,转载至:https://www.cnblogs.com/redcreen/archive/2011/05/04/ ...

  8. 代码审计-thinkphp3.2.3框架漏洞sql注入

    开始复现审计一下tp3和tp5的框架漏洞,当个练习吧. 涉及注入的方法为where() table() delete()等. 环境 tp3.2.3 : 0x01 注入成因 测试代码: public f ...

  9. PHP next

    1.函数的作用:返回数组当前元素位置的下一个元素 2.函数的参数: @param array &$array 3. 例子一:数组拷贝时,内部指针的位置也一起拷贝 <?php $arr1 ...

  10. Python开发【第四篇】语句与函数

    语句 statement 语句是由一些表达式组成,通常一条语句可以独立的执行来完成一部分事情,并且形成结果. 多条语句写在一行内要用分号分开 例子: print('hello world') #这是一 ...