vueRouter回顾

news/2025/1/13 10:56:10/

关于vueRouter的两种路由模式

  • “history” 模式使用正常的 URL 格式,例如 https://example.com/path
  • “hash” 模式将路由信息添加到 URL 的哈希部分(#)后面,例如 https://example.com/#/path

1、history模式:没有hash模式中的#,比较美观,但是时H5新属性,老的浏览器可能不支持

2、hash模式: 路径中有一个#,当浏览器强制刷新时,会重新请求浏览器导航栏中的路径,但是会丢失#后拼接的参数

关于VueRouter的两种传方式

1、query传参: this.$router.push({ path:'/user' , query:{ name:'zs' } }) ,使用query传参时会把参数拼接在要跳转路径的后面  '/user?name=zs'  query传参的好处就是参数拼接在的请求的url上,当页面强制刷新时参数也不会丢失,在页面强制刷新后,你依然可以在当前的组件上使用this.$router.query获取上个也页面传递过来的query参数

2、params传参: this.$router.push({name:'user', path:'/user' , params:{ params:'zs' } }) ,使用params传参时一定要为要跳转的页面设置一个name属性,跳转时name对应路由配置的的name。params参数不会放在要跳转的路径上,而是会放在router的params这个对象上,当页面强制刷新时会丢失params中的参数,此时当前页面将获取不到上个页面传递过来的参数


http://www.ppmy.cn/news/1033637.html

相关文章

8.15号经典模型复习笔记

文章目录 Deep Residual Learning for Image Recognition(CVPR2016)方法 Densely Connected Convolutional Networks(CVPR2017)方法 EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks(ICML2019)方法 Re…

echarts多条折线图

代码 <template><div><!-- 折线图 --><div id"average-score1" class"risk-percent" /></div> </template><script> import * as echarts from "echarts";export default {name: "StrategicRis…

Visual Studio 与QT ui文件

对.ui文件鼠标右键&#xff0c;然后单击 Open with…在弹出的窗口中&#xff0c;选中左侧的 Qt Designer&#xff0c;然后单击右侧的 Add 按钮&#xff0c;随后会弹出一个窗口&#xff0c;在 Program: 输入框中输入 Qt Designer 的路径&#xff0c;最后单击 OK找到 Qt Designer…

字节春招JAVA后端开发面试总结

春招的字节二面面经,岗位是后端开发。 一个编程语言都没问,都是问网络+项目+mysql+redis。 问题记录 使用消息中间件降低消息持久化的压力是怎么做的,为什么可以降低? 在突发大量消息的情况下可以做到流量削峰,在消费者消费能力达不到生产者产生消息的速度时也能够正常…

分割字符串的最大得分

题目&#xff1a; 给你一个由若干 0 和 1 组成的字符串 s &#xff0c;请你计算并返回将该字符串分割成两个 非空 子字符串&#xff08;即 左 子字符串和 右 子字符串&#xff09;所能获得的最大得分。 「分割字符串的得分」为 左 子字符串中 0 的数量加上 右 子字符串中 1 的…

Linux的ln命令

ln是link的缩写,在Linux中 ln 命令的功能是为某一个文件在另外一个位置建立一个同步的链接&#xff0c;当我们需要在不同的目录&#xff0c;用到相同的文件时&#xff0c;我们不需要在每一个需要的目录下都放一个必须相同的文件&#xff0c;我们只要在某个固定的目录&#xff0…

全面拥抱AI时刻来临?基于AI技术助力养猪产仔是否可行?

这两天看到一篇论文&#xff0c;蛮有意思的&#xff0c;技术层面倒没有什么新颖的点&#xff0c;主要是落地应用场景比较贴近现实&#xff0c;文章主要就是应用yolov5来开发构建了一套母猪产仔智能化检测预警模型&#xff0c;从而来降低大型养殖场中人工成本。一起来简单看下吧…

理解持续测试,才算理解DevOps

软件产品的成功与否&#xff0c;在很大程度上取决于对市场需求的及时把控&#xff0c;采用DevOps可以加快产品交付速度&#xff0c;改善用户体验&#xff0c;从而有助于保持领先于竞争对手的优势。 作为敏捷开发方法论的一种扩展&#xff0c;DevOps强调开发、测试和运维不同团队…