Vue-route核心知识整理

目录

1 相关理解

1.1 对 vue-router 的理解

1.2 对 SPA 应用的理解

1.3 对路由的理解

1.3.1 什么是路由?

1.3.2 路由的分类

2 几个注意点

3 路由的基本使用

4 嵌套 (多级) 路由

5 路由传参

5.1 query 方式传参

5.1.1 跳转路由并携带query参数, to的字符串写法

5.1.2 跳转路由并携带query参数, to的对象写法

5.2 给路由命名

5.3 params方式传参

5.3.1 跳转路由并携带params参数, to的字符串写法

5.3.2 跳转路由并携带params参数, to的对象写法

5.4 props配置,实现传参

5.4.1 props配置方式1

5.4.2 props配置方式2

5.4.3 props配置方式3

6 路由的replace属性

7 路由的编程式导航

8 缓存路由组件

9 两个新的生命周期钩子

10 全局路由守卫(前置和后置路由守卫)

11 独享路由守卫

12 组件内守卫

13 路由的两种工作模式


1 相关理解

1.1 对 vue-router 的理解

是vue的一个插件库,专门用来实现SPA应用

1.2 对 SPA 应用的理解

1. 单页Web应用 (Single Page Web Application,  SPA)

2.  整个应用只有一个完整的页面

3. 点击页面的导航链接不会刷新页面,只会作页面的局部刷新

4. 数据需要通过 ajax请求获取

1.3 对路由的理解

1.3.1 什么是路由?

1. 一个路由就是一组映射关系 (key-value)

2. key为路径,value可能是function 或者 component

1.3.2 路由的分类

【1】后端路由

1)理解:value就是function,用于处理客户端提交的请求

2)工作过程:服务器接收到一个请求,根据请求的路径找到匹配的函数来处理请求,并返回响应的数据

【2】前端路由

1)理解:value就是component,用于展示页面内容

2)工作过程:当浏览器的路径发生改变时,对应的组件就会显示


2 几个注意点


3 路由的基本使用

【1】创建整个应用的路由器


 【2】在main.js入口文件中引入


【3】App组件


4 嵌套 (多级) 路由

【1】router文件夹下的index.js文件中


【2】Home组件中


5 路由传参

5.1 query 方式传参

【1】先写个三级路由,让其跳转到Detail组件


【2】利用 query 将Message组件中的数据传递给组件Detail中

在Message组件中:

5.1.1 跳转路由并携带query参数, to的字符串写法

对 to 进行数据绑定并使用模板字符串的写法

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数, to的字符串写法 --><router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link></li></ul><!-- 展示内容 --><router-view></router-view></div>
</template><script>export default {name: 'Message',data() {return {messageList: [{id:'001',title:'message001'},{id:'002',title:'message002'},{id:'003',title:'message003'}]}},}
</script>

Detail组件中接收参数:

<template><div><h3>Detail</h3><ul><li>消息编号:{{ $route.query.id }}</li><li>消息内容:{{$route.query.title}} </li></ul></div></template><script>export default {name: 'Detail',}
</script>

 

5.1.2 跳转路由并携带query参数, to的对象写法

Message组件中:

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数, to的对象写法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><!-- 展示内容 --><router-view></router-view></div>
</template><script>export default {name: 'Message',data() {return {messageList: [{id:'001',title:'message001'},{id:'002',title:'message002'},{id:'003',title:'message003'}]}},}
</script>

Detail组件中:

<template><div><h3>Detail</h3><ul><li>消息编号:{{ $route.query.id }}</li><li>消息内容:{{$route.query.title}} </li></ul></div></template><script>export default {name: 'Detail',}
</script>

【总结】


5.2 给路由命名

在上述使用query传参中,使用 to 的对象形式传参时,如果路径很长时,就很麻烦


所有我们就可以给路由命名,通过name 指定要跳转的路径


在Message中


5.3 params方式传参

【1】配置路由,声明接收params参数


 

【2】Message组件中传递参数

5.3.1 跳转路由并携带params参数, to的字符串写法

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带params参数, to的字符串写法 --><router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link></li></ul><!-- 展示内容 --><router-view></router-view></div>
</template><script>export default {name: 'Message',data() {return {messageList: [{id:'001',title:'message001'},{id:'002',title:'message002'},{id:'003',title:'message003'}]}},}
</script>

5.3.2 跳转路由并携带params参数, to的对象写法

使用对象形式传参时:指定跳转路径,必须使用name配置项, 不允许使用path配置项

<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带params参数, to的对象写法 --><router-link :to="{name: 'xiangqing',  // 如果使用params传参这边必须使用name, 不允许使用pathparams:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><!-- 展示内容 --><router-view></router-view></div>
</template><script>export default {name: 'Message',data() {return {messageList: [{id:'001',title:'message001'},{id:'002',title:'message002'},{id:'003',title:'message003'}]}},}
</script>

【3】Detail组件接收参数


5.4 props配置,实现传参

在router文件夹下的index.js文件中编写配置, 想传递参数给哪个组件,就给哪个组件加props配置

                   children: [ // 子路由的子路由(三级路由){name: 'xiangqing',path: 'detail',component: Detail,// props: ...}] 

使用props配置传参时,就会将接收的参数以props形式传递给目标组件


5.4.1 props配置方式1

props的第一种写法,值为对象,该对象中的所有key、value都会以props形式传递给Detail组件

这种方式用的不多,因为只能传递固定值的参数 

Detail组件中接收参数并使用


 

5.4.2 props配置方式2

值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props形式传递给Detail组件

缺点是只能传递params参数

接收方式跟上面一样


 

5.4.3 props配置方式3

props的第三种写法,值为函数

推荐使用这种方式,因为query参数和params参数都可以传递


 

6 路由的replace属性

这个过程就相当于压栈的过程,push方式是将点击的所有路径都一次地压入栈中,而replace方式是将当前地路径替换掉它之前地路径


7 路由的编程式导航

作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活

【代码1】 

<template><div><ul><li v-for="m in messageList" :key="m.id"><button @click="pushShow(m)">push查看</button><button @click="replaceShow(m)">replace查看</button></li></ul><!-- 展示内容 --><router-view></router-view></div>
</template><script>export default {name: 'Message',data() {return {messageList: [{id:'001',title:'message001'},{id:'002',title:'message002'},{id:'003',title:'message003'}]}},methods: {pushShow(m) {this.$router.push({name: 'xiangqing',params:{id: m.id,title: m.title}})},replaceShow(m) {this.$router.replace({name: 'xiangqing',params:{id: m.id,title: m.title}})}},}
</script><style></style>

 【代码2】

<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2><button @click="back">后退</button><button @click="forward">前进</button></div></div>
</template><script>export default {name: 'Banner',methods: {back() {// this.$router.back()// go传入的正数表示前进的步数,负数表示后退的步数this.$router.go(-1)},forward() {// this.$router.forward()this.$router.go(1)}},}
</script>

【总结】


8 缓存路由组件

当一个组件中含有input表单时,如果用户在表单中输入了内容,这时又点击了另一个链接,此时当前的组件就会被销毁,在下一次访问该组件时,表单中的数据被清空了,如果用户输入了一些重要且长的信息,这用户体验是非常不好的。所以我们可以缓存路由组件解决这个问题

News组件 

 


【总结】


 

9 两个新的生命周期钩子


10 全局路由守卫(前置和后置路由守卫)

在router文件夹下的index.js文件中

注意这边的meta配置项


 


11 独享路由守卫

只有前置,没有后置


12 组件内守卫


13 路由的两种工作模式

有hash和history两种工作模式,默认是hash模式

如何修改为history模式?


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

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

相关文章

微信小程序-绑定数据并在后台获取它

如图 遍历列表的过程中需要绑定数据&#xff0c;点击时候需要绑定数据 这里是源代码 <block wx:for"{{productList}}" wx:key"productId"><view class"product-item" bindtap"handleProductClick" data-product-id"{{i…

Web3区块链游戏:创造虚拟世界的全新体验

随着区块链技术的不断发展&#xff0c;Web3区块链游戏正逐渐崭露头角&#xff0c;为玩家带来了全新的虚拟世界体验。传统游戏中的中心化结构和封闭经济体系已经被打破&#xff0c;取而代之的是去中心化的游戏环境和真实所有权的数字资产。本文将深入探讨Web3区块链游戏的特点、…

代码随想录算法训练营29期|day55 任务以及具体安排

第九章 动态规划part12 309.最佳买卖股票时机含冷冻期 class Solution {public int maxProfit(int[] prices) {//0代表持股票&#xff0c;1代表保持卖出状态&#xff0c;2代表卖出股票。3代表冷冻int[][] dp new int[prices.length][4];dp[0][0] -prices[0];for(int i 1 ; …

MySQL数据库基础(十):DQL数据查询语言

文章目录 DQL数据查询语言 一、数据集准备 二、select查询 三、简单查询 四、条件查询 1、比较查询 2、范围查询 3、逻辑查询 4、模糊查询 5、非空查询 五、排序查询 六、聚合查询 七、分组查询与having子句 1、分组查询介绍 2、group by的使用 3、group by 聚…

web基础及http协议 (二) apache

一、httpd 安装组成 http 服务基于 C/S 结构 1 .常见http 服务器程序 httpd apache&#xff0c;存在C10K&#xff08;10K connections&#xff09;问题 nginx 解决C10K问题lighttpd IIS .asp 应用程序服务器 tomcat .jsp 应用程序服务器 jetty 开源的servlet容器&#xf…

vm centos7 docker 安装 mysql 5.7.28(2024-02-18)

centos系统版本 [rootlocalhost mysql5.7]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) docker版本 拉取指定版本镜像 docker pull mysql:5.7.28 docker images 创建挂载目录&#xff08;数据存储在centos的磁盘上&#xff09; mkdir -p /app/softwa…

ElscticSearch基础操作

Es数据格式和Mysql对比 ElasticSearch index(索引) Type(类型) Documents(文档) Fields(字段) ​ MySQL Databases(数据库) Table(表) Row(行) Column(列) 倒排索引 正向索引,在Mysql中使用的索引就是正排索引,索引对应的就是直接的数据 例子: id content 1 my name is …

【JVM篇】什么是类加载器,有哪些常见的类加载器

文章目录 &#x1f354;什么是类加载器&#x1f6f8;有哪些常见的类加载器 &#x1f354;什么是类加载器 负责在类加载过程中&#xff0c;将字节码信息以流的方式获取并加载到内存当中 &#x1f6f8;有哪些常见的类加载器 启动类加载器 启动类加载器是有Hotspot虚拟机通过的类…

每日一题 力扣107 二叉树的层序遍历Ⅱ

107. 二叉树的层序遍历 II 题目描述&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09; 示例 1&#xff1a; 输入&#xff1a;root [3,9,20…

Github 2024-02-18 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-18统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目5PowerShell项目1Rust项目1PHP项目1Jupyter Notebook项目1TypeScript项目1 Black&#xff1a;不妥…

把Llama2封装为API服务并做一个互动网页

最近按照官方例子&#xff0c;把Llama2跑起来了测试通了&#xff0c;但是想封装成api服务&#xff0c;耗费了一些些力气 参考&#xff1a;https://github.com/facebookresearch/llama/pull/147/files 1. 准备的前提如下 按照官方如下命令&#xff0c;可以运行成功 torchrun -…

程序员必看的几部电影

目录 《我是谁&#xff1a;没有绝对安全的系统》 《模仿游戏》 《硅谷传奇》 《代码 The Code》 作为程序员&#xff0c;除了在工作中不断学习和提升技术外&#xff0c;适当地放松也是必不可少的 看电影可以是一个很好的放松方式&#xff0c;而对于程序员来说&#xff0c;…

DNS服务正反解析

1.正向解析 1.配置基本 1.1防火墙配置 二者都要关闭 setenforce 0 systemctl stop firewalld #关闭防火墙 yum install bind -y #下载bind软件 客户端可以不用下 1.2服务端配置静态ip&#xff0c; ip a 查看网卡 nmcli c modify ens33 ipv4.method manual ipv4.addresses …

HTTP特性

大家好我是苏麟 , 今天说说HTTP特性. 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 到目前为止&#xff0c;HTTP 常见到版本有 HTTP/1.1&#xff0c;HTTP/2.0,HTTP/3.0&#xff0c;不同版本的 HTTP 特性是不一样的。 这里先用 HTTP/1.1 版本给大家介…

算法——位运算

1. 基础位运算 位运算符是在二进制位级别上对数据进行操作的运算符。以下是一些常见的位运算符: 1. 右移运算符 (>>) 将一个数的所有二进制位向右移动指定的位数。右移运算符 >> 表示将运算符左边的操作数的所有位向右移动右边指定的位数&#xff0c;右边多余的…

如何系统地学习Python

建议系统学习Python的途径遵循理论与实践相结合的教学方法。以下是一个分阶段的学习计划&#xff1a; 阶段一&#xff1a;基础知识 理解Python的特点&#xff1a; 认识Python的历史与设计哲学。学习Python的基本语法和运行环境。 安装Python&#xff1a; 学习如何在不同操作系…

(03)Hive的相关概念——分区表、分桶表

目录 一、Hive分区表 1.1 分区表的概念 1.2 分区表的创建 1.3 分区表数据加载及查询 1.3.1 静态分区 1.3.2 动态分区 1.4 分区表的本质及使用 1.5 分区表的注意事项 1.6 多重分区表 二、Hive分桶表 2.1 分桶表的概念 2.2 分桶表的创建 2.3 分桶表的数据加载 2.4 …

OpenAI最新模型Sora到底有多强?眼见为实的真实世界即将成为过去!

文章目录 1. 写在前面2. 什么是Sora&#xff1f;3. Sora的技术原理 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感…

【MySQL】:C/C++链接

C/C链接 一.前置工作二.官方手册三.基本接口1.初始化和关闭2.进行连接3.下达命令4.获取执行结果5.释放空间 四.测试源代码 一.前置工作 进行C/C链接时我们需要第三方库&#xff0c;但实际上在我们安装MySQL时就已经安装了&#xff0c;如果没有安装下面可以再执行该命令进行更新…

【解决(几乎)任何机器学习问题】:超参数优化篇(超详细)

这篇文章相当长&#xff0c;您可以添加至收藏夹&#xff0c;以便在后续有空时候悠闲地阅读。 有了优秀的模型&#xff0c;就有了优化超参数以获得最佳得分模型的难题。那么&#xff0c;什么是超参数优化呢&#xff1f;假设您的机器学习项⽬有⼀个简单的流程。有⼀个数据集&…