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. [ASP.NET Core 3框架揭秘] 依赖注入:控制反转

    ASP.NET Core框架建立在一些核心的基础框架之上,这些基础框架包括依赖注入.文件系统.配置选项和诊断日志等.这些框架不仅仅是支撑ASP.NET Core框架的基础,我们在进行应用开发的时候同样 ...

  2. Spring Boot2 系列教程(十)Spring Boot 整合 Freemarker

    今天来聊聊 Spring Boot 整合 Freemarker. Freemarker 简介 这是一个相当老牌的开源的免费的模版引擎.通过 Freemarker 模版,我们可以将数据渲染成 HTML ...

  3. 02-17 kd树

    目录 kd树 一.kd树学习目标 二.kd树引入 三.kd树详解 3.1 构造kd树 3.1.1 示例 3.2 kd树搜索 3.2.1 示例 四.kd树流程 4.1 输入 4.2 输出 4.3 流程 ...

  4. B-经济学-基尼指数

    目录 基尼指数 一.基尼指数简介 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/ni ...

  5. 从零开始的vue学习笔记(八)

    前言 今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录 Vue Router是什么 Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SP ...

  6. dubbo配置文件的加载顺序详解(图示)

    Dubbo配置文件的加载顺序 ​ 在使用apache dubbo.version2.7.3 时,配置文件的加载情况.以provider提供服务者为例. 配置文件 ,以下四个配置文件. 其优先级 app ...

  7. POJ1017&&UVA311 Packets(中文题面版)

    感谢有道翻译--- Description A工厂生产的产品是用相同高度h的方形包装,尺寸为1* 1,2 * 2,3 * 3,4 * 4,5 * 5,6 6.这些产品总是以与产品高度h相同,尺寸为66 ...

  8. 苹果开始推送 macOS Catalina10.15 正式版系统更新

    北京时间今天凌晨 1 点,苹果正式推送了 macOS Catalina 10.15 正式版升级.macOS Catalina 10.15 正式版带来了许多重大改变,包括Sidecar.iTunes应用 ...

  9. .NET Core使用App.Metrics监控消息队列(一):初探

    一.简介 App Metrics是一个开放源代码和跨平台的.NET库,用于记录应用程序中的指标.App Metrics可以在.NET Core或也支持.NET 4.5.2的完整.NET框架上运行. A ...

  10. Head First设计模式——观察者模式

    1.气象监测应用,错误示范 有一个气象站,分别有三个装置:温度感应装置,湿度感应装置,气压感应装置.WeathData对象跟踪气象站数据,WeathData有MeasurmentsChanged()方 ...