Vue学习笔记11--路由2(路由传参/命名路由)

一、路由的query传参

  1. 路由的query参数
  • 传递参数
<!--跳转路由并携带query参数, to的字符串写法-->
<!-- <router-link :to='`/home/message/detail?id=${m.id}&title=${m.title}`'>{{ m.title }}</router-link> -->
<!--跳转路由并携带query参数, to的对象写法-->
<router-link :to="{path: '/home/message/detail',query:{id:m.id,title:m.title}
}">{{ m.title }}
</router-link>
  • 接收参数
$route.query.id 
$route.query.title

二、命名路由

  1. 作用:可以简化路由的跳转
  2. 使用方法
  • 给路由命名:
{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //给路由命名path:'welcome',component:Hello,}]}]
}
  • 简化跳转
<!--简化前,需要写完整的路径-->
<router-link to="/demo/test/welcome">跳转</router-link><!--简化后,直接通过名字跳转-->
<router-link :to="{name:hello}">跳转</router-link><!--简化写法配合传递参数-->
<router-link:to="{name:'hello',query:{id:001,title:'你好!'}}"

三、路由的params传参

  1. 配置路由,声明接收params参数
{path: '/home',component: Home,children: [ //通过children配置子路由{path: 'news', //此处一定不要写成:/newscomponent: News,},{path: 'message', //此处一定不要写成:/messagecomponent: Message,children: [{name:'xiangqing',path: 'detail/:id/:title', //使用占位符声明接收params参数component: Detail,}]}],
},
  1. 传递参数
<!--跳转路由并携带params参数, to的字符串写法-->
<router-link :to='`/home/message/detail/${m.id}/${m.title}`'>{{ m.title }}</router-link><!--跳转路由并携带params参数, to的对象写法--><router-link :to="{name: 'xiangqing',params:{id:m.id,title:m.title}}"
>{{ m.title }}
</router-link>
  • 特别注意:路由携带params参数时,若使用to对象写法,则不能使用path配置项,必须使用name配置!
  1. 接收参数
$route.params.id 
$route.params.title

四、配置路由的props配置

作用:让路由组件更方便的收到参数

{name:'xiangqing',path: 'detail/:id/:title',component: Detail,//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1, b:'hello'}//props的第二种写法,值为布尔值,若布尔值为真,就会该路由组件收到的所有params参数,以props的形式传给Detail组件。// props:true,//props的第三种写法,值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件。props($route){return {id:$route.query.id,//id:$route.params.id,title:$route.query.title//title:$route.params.title}},
}

五、<router-link>的replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式:分别为pushreplace,push要追加历史记录,replace是替换当前记录,路由跳转时候默认为push
  3. 如何开启replace模式:<router-link replace ......>News</router-link>

六、编程式路由导航

  1. 作用:不借助实现路由跳转,让路由跳转更加灵活
  2. 具体编码:
this.$router.push({name: 'xiangqing',query:{id:m.id,title:m.title}
})this.$router.push({name: 'xiangqing',query:{id:m.id,title:m.title}
})this.$router.forward()//前进
this.$router.back()//后退
this.$router.go(-3)//可前进或后退,负数-》倒退;正数-》前进

七、缓存路由组件

  1. 作用:让不展示的路由组件保持挂载,不被销毁。
  2. 具体编码:
//缓存多个路由组件
//<keep-alive :include=["News","Message"]> 
//缓存一个路由组件
<keep-alive include="News"> //此次News为组件名,<router-view></router-view>
</keep-alive>

注: 不加include则所有的路由组件都会被缓存

八、两个新的生命周期钩子

1.作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
2.具体名字:

  • activated路由组件被激活时触发
  • deactivated路由组件失活时触发

九、路由守卫

  1. 作用:对路由进行权限控制
  2. 分类:全局守卫、独享守卫、组件内守卫
  3. 全局守卫:
/全局前置路由守卫--初始化及每次路由切换之前被调用
router.beforeEach((to, from, next) => {// to and from are both route objects. must call `next`.console.log('前置路由守卫',to,from,next)if (to.meta.isAuth) {//判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next() //放行}else{alert('学校名不对,无权限查看!')}}else{next()//放行}
})
//全局后置路由守卫--初始化及每次路由切换之后被调用
router.afterEach((to, from, next) => {// to and from are both route objects. must call `next`.console.log('后置路由守卫',to,from,next);if (to.meta.title){document.title = to.meta.title //修改网页的title}else{document.title = 'vue_test'}})
  1. 独享路由守卫
beforeEnter: (to, from, next) => {console.log('前置路由守卫',to,from,next)if (to.meta.isAuth) {//判断是否需要鉴权if(localStorage.getItem('school')==='atguigu'){next() //放行}else{alert('学校名不对,无权限查看!')}}else{next()//放行}
}
  1. 组件内守卫
//通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next) {},
//通过路由规则,离开该组件时被调用
beforeRouteLeave(to, from, next) {}

十、路由器的两种工作模式

  1. 对于一个url来说,什么是hash值?#及其后面的内容就是hash值
  2. hash值不会包含在 HTTP 请求中,即: hash值不会带给服务器。
  3. hash模式:
  • 地址中永远带着#号,不美观。
  • 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
  • 兼容性较好
  1. history模式
  • 地址干净,美观。
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643156.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《WebKit 技术内幕》学习之六(2): CSS解释器和样式布局

2 CSS解释器和规则匹配 在了解了CSS的基本概念之后&#xff0c;下面来理解WebKit如何来解释CSS代码并选择相应的规则。通过介绍WebKit的主要设施帮助理解WebKit的内部工作原理和机制。 2.1 样式的WebKit表示类 在DOM树中&#xff0c;CSS样式可以包含在“style”元素中或者使…

erlang (Lists 操作模块)学习笔记(二)

keysearch 42> lists:keysearch(1, 1, [{1,hello},{2,value}]). {value,{1,hello}} 43> lists:keysearch(3, 1, [{1,hello},{2,value}]). false 在元组 TupleList 列表中搜索 第 N个元素比较等于 Key 的元组。 如果找到这样的元组&#xff0c;则返回 {value&#xff0c…

unity刷新grid,列表

获取UIGrid 组件&#xff0c;更新列表 listParent.GetComponent().repositionNow true;

自然语言处理--概率最大中文分词

自然语言处理附加作业--概率最大中文分词 一、理论描述 中文分词是指将中文句子或文本按照语义和语法规则进行切分成词语的过程。在中文语言中&#xff0c;词语之间没有明显的空格或标点符号来分隔&#xff0c;因此需要通过分词工具或算法来实现对中文文本的分词处理。分词的…

代码随想录算法训练营第二十五天| 491.递增子序列* 46.全排列* 47.全排列 II

491.递增子序列 代码随想录 视频讲解&#xff1a;回溯算法精讲&#xff0c;树层去重与树枝去重 | LeetCode&#xff1a;491.递增子序列_哔哩哔哩_bilibili class Solution {List<List<Integer>> ans new ArrayList<>();List<Integer> list new Arra…

[C++]使用yolov8的onnx模型仅用opencv和bytetrack实现目标追踪

【官方框架地址】 yolov8: https://github.com/ultralytics/ultralytics bytetrack: https://github.com/ifzhang/ByteTrack 【算法介绍】 随着人工智能技术的不断发展&#xff0c;目标追踪已成为计算机视觉领域的重要研究方向。Yolov8和ByTetrack作为当前先进的算法&…

Python实现两因素独立设计方差分析,简单效应分析

# Python实现两因素独立设计方差分析 1. 背景 1. 有研究者探讨了在不同企业文化下&#xff0c;管理者的不同语言风格所产生的影响 有的企业注重员工的独立性&#xff0c;强调个人努力和内部竞争&#xff1b;有的企业注重员工的整体性&#xff0c;强调团队合作和团队绩效。 …

LCD液晶屏驱动详解(3)

2.2、LCD控制寄存器LCDCON2 用于设置垂直方向各信号的时间参数&#xff0c;格式如下表所示&#xff1a; 功能位说明VBPD[31:24]VSYNC信号脉冲之后&#xff0c;还要经过(VBPD1)个HSYNC信号周期&#xff0c;有效的行数据才出现&#xff1b;LINEVAL[23:14]LCD的垂直宽度&#xf…

第十二届“中关村青联杯”全国研究生数学建模竞赛-B题:数据的多流形结构分析

目录 摘 要 1 问题背景 2 模型假设 3 符号系统 4 问题 1 模型的建立与求解

2024PMP考试新考纲-【过程领域】近期典型真题和很详细解析(11)

华研荟继续为您分享【过程Process领域】的新考纲下的真题&#xff0c;帮助大家体会和理解新考纲下PMP的考试特点和如何应用所学的知识和常识&#xff08;经验&#xff09;来解题&#xff0c;并且举一反三&#xff0c;一次性3A通过2024年PMP考试。 2024年PMP考试新考纲-【过程领…

短信平台(电信)

通信方式 采用http1.1通信方式&#xff0c;数据以post方式提交 http 头设置&#xff1a;application/json 签名 采用MD5加密方式, 源字符串采用字段拼接方式 签名中appSecret是平台分配密码 签名方法&#xff1a; 如&#xff1a;String signmd5(param1param2param3…paramN) …

探索文件与交互:使用PyQt5构建一个高级文件选择器

在当今的应用程序开发中&#xff0c;文件管理和交互是一个重要的组成部分。特别是对于桌面应用程序&#xff0c;提供一个直观、功能丰富的文件选择器是提高用户体验的关键。 本篇博客&#xff0c;我将介绍如何使用Python和PyQt5来构建一个高级的文件选择器&#xff0c;它不仅能…

数据挖掘笔记1

课程&#xff1a;清华大学-数据挖掘&#xff1a;理论与算法&#xff08;国家级精品课&#xff09;_哔哩哔哩_bilibili 一、Learning Resources 二、Data 数据是最底层的一种表现形式。数据具有连续性。从存储上来讲&#xff0c;数据分为逻辑上的和物理层的。大数据&#xff1…

np.bincount函数的用法

官网写的非常清晰了&#xff0c; 返回数组的数量比x中的最大值大1&#xff0c;它给出了每个索引值在x中出现的次数。下面&#xff0c;我举个例子让大家更好的理解一下&#xff1a; np.bincount(np.array([0, 1, 1, 3, 2, 1, 7])) array([1, 3, 1, 1, 0, 0, 0, 1])最大值是7&a…

BUU BRUTE 1

靶场教程 1.开局页面&#xff0c;是个登录界面。2.尝试万能密码&#xff0c;发现并不可行&#xff0c;提示【用户名错误】。用户名输入admin&#xff0c;发现提示密码错误&#xff0c;为四位数字。3.那么&#xff0c;抓包爆破吧。通过burp进行抓包。4.发送包到 Intruder 进行爆…

Redis(七)复制

文章目录 是什么功能配置配主库不配从库权限细节 案例配置文件修改 一主二仆固定配置文件主从问题命令操作手动指定 薪火相传反客为主复制原理和工作流程存在问题 是什么 https://redis.io/docs/management/replication/ 就是主从复制&#xff0c;master以写为主&#xff0c;S…

android 线程池的管理工具类

封装了各种类型的线程池&#xff0c;方便直接使用 看下有哪些类型&#xff1a; 默认线程池&#xff0c;搜索模块专用线程池&#xff0c;网络请求专用线程池&#xff0c;U盘更新&#xff0c;同步SDK读写操作线程池&#xff0c;日志打印使用线程池 DEFALUT&#xff0c;SEARCH&…

C++中vector的sort用法

在C中&#xff0c;std::vector对象可以通过std::sort函数来排序。std::sort是定义在<algorithm>头文件中的一个通用函数&#xff0c;可以对几乎所有类型的容器进行排序。它不是std::vector的成员函数&#xff0c;但可以直接作用于std::vector。 基本用法很简单&#xff…

Ubuntu findfont: Font family ‘SimHei‘ not found.

matplotlib中文乱码显示 当我们遇到这样奇怪的问题时, 结果往往很搞笑 尝试1不行 Stopping Jupyter Installing font-manager: sudo apt install font-manager Cleaning the matplotlib cache directory: rm ~/.cache/matplotlib -fr Restarting Jupyter. 尝试2 This work fo…

springboot(ssm动漫手办商城 动漫周边商系统Java系统

springboot(ssm动漫手办商城 动漫周边商系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xf…