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. 从干将莫邪的故事说起--java比较操作注意要点

    故事背景 <搜神记>: 楚干将.莫邪为楚王作剑,三年乃成.王怒,欲杀之.剑有雌雄.其妻重身当产.夫语妻曰:“吾为王作剑,三年乃成.王怒,往必杀我.汝若生子是男,大,告之曰:‘出户望南山,松 ...

  2. 52个有效方法(1) - 了解Objective-C语言的起源

    Objective-C语言使用的是"消息结构"而非"函数调用" "消息结构"和"函数调用"之间的区别 "消息结 ...

  3. ORM查询2

    目录 十三式 2式(针对外键查询优化) select_related和prefetch_related prefetch_related 查询返回值类型 不等式查询 关键字查询 时间查询 跨表查询 组 ...

  4. 网络游戏开发-客户端1(开始Hello world)

    打开Egret Launcher ,新建一个EUI项目,起名为 EQiPai 这里需要勾选的是socket网络库,game游戏库.如果要面向海外用户的话,建议勾上Facebook的小游戏sdk. 然后 ...

  5. 章节十七章、2- 给执行失败的case截图

    一.案例演示 1.首先我们把截图的方法单独进行封装方便以后调用. package utilities; import java.io.File; import java.io.IOException; ...

  6. 数据存储检索之B+树和LSM-Tree

    作为一名应用系统开发人员,为什么要关注数据内部的存储和检索呢?首先,你不太可能从头开始实现一套自己的存储引擎,往往需要从众多现有的存储引擎中选择一个适合自己应用的存储引擎.因此,为了针对你特定的工作负 ...

  7. .net core 3.0 WPF中使用FolderBrowserDialog

    前言 随着.net core 3.0 的发布,WPF 也可以在 core 平台上使用了.当前的 WPF 不支持跨平台,仅能够在 Windows 平台上使用.如果想体验 WPF 跨平台开发,可以访问开源 ...

  8. badboy录制脚本

    第一步:介绍badboy工具 1.1: 页面功能分析: 1. 界面视图,模拟浏览器,能够进行操作 2. 需要录制脚本的URL 3. 点击运行URL 4. Summary:运行的各指标,响应时间,成功事 ...

  9. 生产环境中利用软链接避免"rm -rf /"的方法

      1.将系统中的rm二进制文件重命名为rm_real:2.编写脚本rm_shell,rm_shell中主要包含以下内容:    2.1)路径转换模块,用于将rm_shell参数中的路径转换为绝对路径 ...

  10. Halcon一日一练:图像设备介绍

    Halcon在设计之初就提供了完整的图像采集方案,适应了多种图像设备采集图像,以及各种不同环境的采集方案. 通常情况下,图像的采集应该是所有机器视觉项目首要解决的任务,不幸的是,需要解决图像采集的问题 ...