Vue基础 --- 路由

1. 前端路由的概念与原理

1.1 什么是路由

路由(英文:router)就是对应关系

1.2 SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。

此时,不同组件之间的切换需要通过前端路由来实现。

结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!

1.3 什么是前端路由

通俗易懂的概念:Hash 地址组件之间的对应关系

1.4 前端路由的工作方式

① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

(后期贴图)

结论:前端路由,指的是 Hash 地址组件之间的对应关系

1.5 实现简易的前端路由

步骤1:通过 <component> 标签,结合 comName 动态渲染组件。示例代码如下:
在这里插入图片描述
步骤2:在 App.vue 组件中,为 <a> 链接添加对应的 hash 值
在这里插入图片描述
步骤3:在 created 生命周期函数中,监听浏览器地址栏中 hash 地址的变化,动态切换要展示的组件的名称:
在这里插入图片描述

2. vue-router 的基本使用

2.1 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址:https://router.vuejs.org/zh/

2.2 vue-router 安装和配置的步骤

① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接占位符

2.2.1 在项目中安装 vue-router

在 vue2 的项目中,安装 vue-router 的命令如下:npm i vue-router@3.5.2 -S

2.2.2 创建路由模块

src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:
在这里插入图片描述

2.2.3 导入并挂载路由模块

在 src/main.js 入口文件中,导入并挂载路由模块。示例代码如下:
在这里插入图片描述

2.2.4 声明路由链接占位符

在 src/App.vue 组件中,使用 vue-router 提供的 <router-link><router-view> 声明路由链接和占位符:
在这里插入图片描述

2.3 声明路由的匹配规则

在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则。示例代码如下:
在这里插入图片描述

3. vue-router 的常见用法

3.1 路由重定向

路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:
在这里插入图片描述

3.2 嵌套路由

通过路由实现组件的嵌套展示,叫做嵌套路由。

3.3.1 声明子路由链接子路由占位符

About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下:
在这里插入图片描述

3.3.2 通过 children 属性声明子路由规则

在 src/router/index.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则:
在这里插入图片描述

3.4 动态路由匹配

思考:有如下 3 个路由链接:

<router-link to="/movie/1">电影1</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影3</router-link>

定义如下 3 个路由规则,是否可行???

 {path: '/movie/1' ,component: Movie }
 {path: '/movie/2',component: Movie }
 {path: '/movie/3' , component: Movie }

缺点:路由规则的复用性差

3.4.1 动态路由的概念

动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性
在 vue-router 中使用英文的冒号:)来定义路由的参数项。示例代码如下:
在这里插入图片描述

3.4.2 $route.params 参数对象

动态路由渲染出来的组件中,可以使用 this.$route.params 对象访问到动态匹配的参数值
在这里插入图片描述

3.4.3 使用 props 接收路由参数

为了简化路由参数的获取形式,vue-router 允许在路由规则开启 props 传参。示例代码如下:
在这里插入图片描述

3.5 声明式导航 & 编程式导航

在浏览器中,点击链接实现导航的方式,叫做声明式导航。例如:

  • 普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航

在浏览器中,调用 API 方法实现导航的方式,叫做编程式导航。例如:

  • 普通网页中调用 location.href 跳转到新页面的方式,属于编程式导航

3.5.1 vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API,其中最常用的导航 API 分别是:
① this.$router.push(‘hash 地址’)

  • 跳转到指定 hash 地址,并增加一条历史记录
    ② this.$router.replace(‘hash 地址’)
  • 跳转到指定的 hash 地址,并替换掉当前的历史记录
    ③ this.$router.go(数值 n)
  • 实现导航历史前进、后退

3.5.2 $router.push

调用 this.$router.push() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。示例代码如下:
在这里插入图片描述

3.5.3 $router.replace

调用 this.$router.replace() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。

push 和 replace 的区别:

  • push 会增加一条历史记录
  • replace 不会增加历史记录,而是替换掉当前的历史记录

3.5.4 $router.go

调用 this.$router.go() 方法,可以在浏览历史中前进和后退。示例代码如下:
在这里插入图片描述

3.5.5 $router.go 的简化用法

在实际开发中,一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法:
① $router.back()

  • 在历史记录中,后退到上一个页面
    ② $router.forward()
  • 在历史记录中,前进到下一个页面

3.6 导航守卫

导航守卫可以控制路由的访问权限。示意图如下:
在这里插入图片描述

3.6.1 全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制:
在这里插入图片描述

3.6.2 守卫方法的 3 个形参

全局前置守卫的回调函数中接收 3 个形参,格式为:
在这里插入图片描述

3.6.3 next 函数的 3 种调用方式

参考示意图,分析 next 函数的 3 种调用方式最终导致的结果:

当前用户拥有后台主页的访问权限,直接放行:next()
当前用户没有后台主页的访问权限,强制其跳转到登录页面:next(‘/login’)
当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)

3.6.4 控制后台主页的访问权限

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

echarts统计图x轴文字过长,以省略号显示,鼠标经过提示全部内容

效果图如下 主要代码如下&#xff1a; //1.js代码内加入extension方法&#xff0c;chart参数是echarts实例 function extension(chart) {// 注意这里&#xff0c;是以X轴显示内容过长为例&#xff0c;如果是y轴的话&#xff0c;需要把params.componentType xAxis改为yAxis/…

国产内存惹人爱,光威的价格战太凶猛,海外品牌已无力招架

现阶段&#xff0c;真的很适合升级内存条和SSD&#xff01;当然了&#xff0c;我说的是国产的品牌&#xff0c;经过这几年的发展&#xff0c;国产内存和SSD的表现都有了质的飞跃&#xff0c;像是光威之类的品牌&#xff0c;更是成功在玩家群体中获得了良好的口碑&#xff0c;而…

使用镜像搭建nacos集群

安装并配置 docker 1 先安装docker //1.查看操作系统的发行版号 uname -r//2.安装依赖软件包 yum install -y yum-utils device-mapper-persistent-data lvm2//3.设置yum镜像源 //官方源&#xff08;慢&#xff09; yum-config-manager --add-repo http://download.docker.co…

mysql进阶1——proxysql中间件

文章目录 一、基本了解二、安装部署三、proxysql管理配置3.1 内置库3.1.1 main库表3.1.2 stats库表3.1.3 monitor库 3.2 常用管理变量3.2.1 添加管理用户3.2.2 添加普通用户3.2.3 修改监听套接字 四、多层配置系统4.1 系统结构4.2 修改变量加载配置4.3 启动加载流程 一、基本了…

Jmeter(二十三):快速生成测试报告

一、jmeter配置 首先要保证jmeter命令是ok的,如果你在cmd中输入jmeter -v,有出现如下截图所示的信息,那就说明jmeter环境ok; 二、jmeter执行结合命令 生成HTML测试报告 1.完成脚本的调试、参数化、断言等操作。然后在聚合报告中指定日志文件存储路径,路径中最好不要包含有…

利用官网文档快速上手 Android 开发

官网学习链接&#xff1a;官网链接 官网教程

electron-egg 加密报错

electron框架&#xff1a;electron-egg 解决方式 npm uninstall bytenode npm install bytenode1.3.6node:internal/modules/cjs/loader:928 throw err; ^ Error: Cannot find module ‘node:assert/strict’ Require stack: D:\electron-egg-test\new-electron-egg\electr…

SpringBoot与文档excel,pdf集成案例分享

一、文档类型介绍 1、Excel文档 Excel一款电子表格软件。直观的界面、出色的计算功能和图表工具&#xff0c;在系统开发中&#xff0c;经常用来把数据转存到Excel文件&#xff0c;或者Excel数据导入系统中&#xff0c;这就涉及数据转换问题。 2、PDF文档 PDF是可移植文档格…

干翻Dubbo系列第四篇:Dubbo3第一个应用程序细节补充

前言 不从恶人的计谋&#xff0c;不站罪人的道路&#xff0c;不坐亵慢人的座位&#xff0c;惟喜爱耶和华的律法&#xff0c;昼夜思想&#xff0c;这人便为有福&#xff01;他要像一棵树栽在溪水旁&#xff0c;按时候结果子&#xff0c;叶子也不枯干。凡他所做的尽都顺利。 如…

Higress非K8S安装

Higress非K8S安装 文章目录 Higress非K8S安装环境安装安装higress进入到higress 的目录下修改下nacos的地址启动Higress登录higress管理页面 Higress 是基于阿里内部构建的下一代云原生网关&#xff0c;官网介绍&#xff1a;https://higress.io/zh-cn/docs/overview/what-is-hi…

HuggingGPT Solving AI Tasks with ChatGPT and its Friends in Hugging Face

总述 HuggingGPT 让LLM发挥向路由器一样的作用&#xff0c;让LLM来选择调用那个专业的模型来执行任务。HuggingGPT搭建LLM和专业AI模型的桥梁。Language is a generic interface for LLMs to connect AI models 四个阶段 Task Planning&#xff1a; 将复杂的任务分解。但是这里…

外文期刊影响因子去哪里查询,如何查询

期刊影响因子(Impact factor&#xff0c;IF)&#xff0c;是代表期刊影响大小的一项定量指标。也就是某刊平均每篇论文的被引用数&#xff0c;它实际上是某刊在某年被全部源刊物引证该刊前两年发表论文的次数&#xff0c;与该刊前两年所发表的全部源论文数之比。那么&#xff0c…

《嵌入式 - 工具》J-link读写MCU内部Flash

1 J-Link简介 J-Link是SEGGER公司为支持仿真ARM内核芯片推出的JTAG仿真器。配合IAR EWAR&#xff0c;ADS&#xff0c;KEIL&#xff0c;WINARM&#xff0c;RealView等集成开发环境支持所有ARM7/ARM9/ARM11,Cortex M0/M1/M3/M4, Cortex A5/A8/A9等内核芯片的仿真&#xff0c;是学…

redis 第二章

目录 1.持久化 2.主从复制 3.总结 1.持久化 通过 aof 和 rdb 将内存里的数据放到磁盘中 aof: rdb: 2.主从复制 将一台 redis 服务器的数据&#xff0c;复制到其他的 redis 服务器 3.总结 主从复制是高可用 redis 的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可…

线性代数(基础篇):第一章:行列式 、第二章:矩阵

文章目录 线性代数0&#xff1a;串联各章等价条件 第1章 行列式1.行列式的定义(1)行列式的本质定义(2)行列式的逆序数法定义(3)行列式的展开定理 (第三种定义) 2.行列式的性质3.行列式的公式4.基本行列式(1)主对角线行列式(2)副对角线行列式(3)拉普拉斯行列式(4)范德蒙德行列式…

深度学习入门(一):神经网络基础

一、深度学习概念 1、定义 通过训练多层网络结构对位置数据进行分类或回归&#xff0c;深度学习解决特征工程问题。 2、深度学习应用 图像处理语言识别自然语言处理 在移动端不太好&#xff0c;计算量太大了&#xff0c;速度可能会慢 eg.医学应用、自动上色 3、例子 使用…

关于Ubuntu 18.04 LTS环境下运行程序出现的问题

关于Ubuntu 18.04 LTS环境下运行程序出现的问题 1.运行程序时出现以下情况 2.检查版本 strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_​ 发现Ubuntu18.04下的glibc版本最高为2.27,而现程序所使用的是glibc2.34,所以没办法运行, 3.解决办法 安装glibc2.34库, …

HCIA练习4

题目如下&#xff1a; 目录 第一步&#xff1a;IP的规划 第二步&#xff1a;缺省路由 第三步&#xff1a;开启telnet 第四步&#xff1a;编写ACL表 第五步&#xff1a;测试 思路分析&#xff1a; 华为默认允许所有&#xff0c;所以我们可以先写拒绝要求&#xff0c;再写允…

TD1850多用表校准系统参考标准

参考标准 分类 标准名称 国家标准 GB/T 13978-2008 数字多用表 GB/T 15637-2012 数字多用表校准仪通用规范 计量法规 JJF 1075-2015 钳形电流表校准规范 JJF 1284-2011 交直流电表校验仪校准规范 JJF 1587-2016 数字多用表校准规范 JJG 124-2005 电流表、电压表、功率表及…

脉冲信号测试应如何选择示波器带宽?

示波器模拟带宽的定义大家都比较熟悉&#xff0c;是针对于正弦波信号定义的。从频域上看&#xff0c;正弦波信号的频谱就是单根谱线&#xff0c;只要示波器的带宽不小于信号的频率&#xff0c;那么就可以有效观测到波形。若要追求更高的幅度测试精度&#xff0c;则可以按照5倍法…