路由传参 query 和 params
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的更多相关文章
- vue路由传参query和params的区别(详解!)
1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...
- Vue-路由传参query与params
注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...
- vue-router路由动态传参query和params的区别
1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- vue链接传参与路由传参
1.链接传参: 例如:链接是:http://localhost:3333/#/index?id=001 我们要获取参数:console.log(this.$route.query.id):即可 2.路 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue动态路由配置,vue路由传参
动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...
- vue 路由传参
mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由 2.history路由 不会带#的 单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...
- vue父子组件路由传参的方式
一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...
随机推荐
- js匿名函数自执行的好处
我们知道,在创建一个函数时如果要用到变量来存取信息的话,要尽量使用局部变量. 因为一方面局部变量会随着函数的执行结束被销毁:另一方面在不执行函数的时候也不会创建这个局部变量,对节省空间资源有很大的好处 ...
- pycharm 激活码 2019/11最新福利(2)
812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlT ...
- XCTF-CAT
果然还是我太菜了呜呜呜,这道题仍然是没有自己做出来.哎. 这一道用的并不是PHP的环境,而是用Python中的Django编写的. 记得做过类似的一道题目.来源于MOCTF中的网站扫描器,当时做完后其 ...
- 数据表管理admin
知识预览 admin组件使用 admin源码解析 回到顶部 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你 ...
- PHP array_replace
1.函数的作用:替换数组的元素 2.函数的参数: @params array $array1 被替换的数组 @params array $array2 替换的数组 @params array $a ...
- oracle初级系列教程
https://www.cnblogs.com/linjiqin/category/349944.html
- std::unordered_map
map与unordered_map的区别 1.map: map内部实现了一个红黑树,该结构具有自动排序的功能,因此map内部的所有元素都是有序的,红黑树的每一个节点都代表着map的一个元素, 因此,对 ...
- 020 - FreeRTOS学习路线总结
零.为什么写? 在H7-tools预售群里,有位朋友提出如何学习FreeRTOS这类的问题,便由此总结下自己的学习路线.最近又打算接触RTT,和FreeRTOS做个对比. 文章分两步来讲,学习路线和学 ...
- 小白学微信小程序
奔着实用性的目的-测试孩子的认字量,开发了一个微信小程序-测字大王.上下班路上看书看了一个星期,代码前后共写一个星期.现在小程序已经对外开放,share下我的开发过程吧. 一 工具准备 首先先过一篇 ...
- Shiro learning - 入门学习 Shiro中的基础知识(1)
Shiro入门学习 一 .什么是Shiro? 看一下官网对于 what is Shiro ? 的解释 Apache Shiro (pronounced “shee-roh”, the Japanese ...