Day3: 前端路由(基础篇)

「目标」: 持续输出!每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。

「主要面向群体:」前端开发工程师(初、中、高级)、应届、转行、培训等同学

Day3-今日话题

想必大家经常会在面试中或者工作生活中听到「前端路由」相关的问题或者话题,那么今天我将从以下几个方面聊聊前端路由:

1. 前端路由是什么?

前端路由是指在单页应用(SPA)中,通过在前端管理和控制页面之间的切换和导航的机制。它允许用户在不离开当前页面的情况下浏览不同的内容,提供了更流畅、响应更快的用户体验。前端路由通过监听 URL 的变化,根据不同的路径渲染不同的视图组件,实现页面的无刷新切换。

2. 前端路由模式有哪些?

「Hash 模式」: 在 URL 中使用 # 后面的哈希部分来表示页面路径,例如

http://example.com/#/home

哈希部分的变化不会导致浏览器向服务器发送请求,适用于没有服务器支持的场景。

「History 模式」: 使用浏览器的 History API 来改变 URL 路径,不再需要使用 #,例如

http://example.com/home

这种模式需要服务器支持,但相较于 Hash 模式,URL 更友好

3. 路由守卫是什么?

路由守卫是一些钩子函数,用于在页面导航发生时执行特定的操作,例如验证用户权限、重定向、取消导航等。它们确保用户在访问页面时具有正确的权限和行为。

在 React 中,你可以使用 React-Router 提供的 Route 组件的 「render」「component」「children」 属性来实现路由守卫。通过在这些属性中编写逻辑,可以在渲染前进行验证或重定向操作。

<Route path="/profile" render={() => {
  if (userIsAuthenticated) {
    return <Profile />;
  } else {
    return <Redirect to="/login" />;
  }
}} />

<Route path="/dashboard" children={({ match }) => {
  return match ? <Dashboard /> : <Redirect to="/login" />;
}} />

在 Vue 中,你可以使用 Vue Router 提供的全局导航守卫和路由独享守卫来实现路由守卫。

vue全局导航守卫:

  1. 「beforeEach」: 在每次导航发生之前调用。这个守卫可以用来执行一些全局的权限验证、重定向或其他预处理操作。
  2. 「beforeResolve」: 在每次导航确认之前调用。和 beforeEach 类似,但在 beforeEach 之前调用。在所有异步路由组件被解析之后触发。
  3. 「afterEach」: 在每次导航完成之后调用。可以用来执行一些清理操作、发送统计信息等。没有 next() 方法,不会影响导航本身
  4. 「onError」: 在导航过程中出现错误时调用。可以用来处理导航错误。
router.beforeEach((to, from, next) => {
  // 在每次导航之前执行
  console.log('Before each navigation');
  next();
});

router.beforeResolve((to, from, next) => {
  // 在每次导航确认之前执行,和 beforeEach 类似
  console.log('Before resolve navigation');
  next();
});

router.afterEach((to, from) => {
  // 在每次导航完成之后执行
  console.log('After each navigation');
});

router.onError((err) => {
  // 导航错误时执行
  console.error('Navigation error:', err);
});

vue路由独享守卫:

  1. 「beforeEnter」: 在路由进入前调用,只会对当前路由起作用。可以在此进行验证、重定向等操作。

  2. 「beforeRouteUpdate」: 在当前路由复用时(例如,同一个组件在不同路由间切换)调用,例如在参数变化时。此时,组件实例会被复用,因此你可以通过访问 this 来获取组件实例。

  3. 「beforeRouteLeave」: 在路由离开前调用,只会对当前路由起作用。用于确认是否允许离开当前路由,例如执行确认提示操作。

  4. 「beforeRouteEnter」: 在路由进入前调用,只会对当前路由起作用。但与其他守卫不同,这个守卫不会拥有组件的实例,所以不能通过 this 访问组件。可以通过回调函数 next(vm => {}) 获取组件实例。

const routes = [
{
    path'/home',
    component: Home,
    beforeEnter(to, from, next) =>   {
      if (isUserAuthenticated()) {
        next(); // 允许导航
      } else {
        next('/login'); // 重定向到登录页面
       }
    }
},
{
    path'/user/:id',
    component: UserProfile,
    beforeRouteUpdate(to, from, next) => {
      // 在用户切换不同用户时,根据新的参数更新数据
      if (to.params.id !== from.params.id) {
        this.fetchUserData(to.params.id);
      }
      next();
    }
 },
    {
    path'/edit/:id',
    component: EditPost,
    beforeRouteLeave(to, from, next) => {
      if (this.isDirty) {
        if (confirm('You have unsaved changes. Do you really want to leave?')) {
          next();
        } else {
          next(false); // 取消导航
        }
      } else {
        next();
      }
    }
  },
];
{
    path'/profile/:id',
    component: UserProfile,
    beforeRouteEnter(to, from, next) => {
      // 获取组件实例,并在数据准备好后调用 next()
      fetchData(to.params.id, user => {
        next(vm => {
          vm.user = user;
        });
      });
    }
  },
4. 路由表是什么?

路由表由一个个路由配置对象组成,在一个复杂的应用中,路由表可以更加详细,包括嵌套路由、动态路由参数、路由重定向等。例如:


const routes = [
  { path'/'component: Home },
  {
    path'/products',
    component: Products,
    children: [
      { path'shoes'component: Shoes },
      { path'clothes'component: Clothes }
    ]
  },
  { path'/product/:id'component: ProductDetail },
  { path'/contact'component: Contact },
  { path'/404'component: NotFound },
  { path'/:catchAll(.*)'redirect'/404' }
];

5. 路由参数和查询参数

当构建前端单页应用时,路由参数和查询参数是两种常见的传递数据的机制。它们允许你在不同页面之间传递信息,但在传递方式、用途和实现上有一些区别。

「路由参数:」

  • 「定义方式:」 路由参数是直接嵌入在 URL 路径中,通常使用动态的路径片段进行定义。在路径中使用冒号 : 来指示一个参数。例如: /user/:id
  • 「用途:」 路由参数适用于标识性的信息,如用户 ID、商品 ID 等。在不同路径下,参数值会不同,但路径结构保持一致。
  • 「在 Vue 项目中使用:」 在 Vue 项目中,你可以通过 this.$route.params 来访问路由参数的值。
  • 「在 React 项目中使用:」 在 React 项目中,你可以使用 useParams() 钩子来获取路由参数的值。

在 Vue 中的路由参数使用:

<template>
  <div>
    <router-link :to="'/user/' + userId">User Profile</router-link>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  data() {
    return {
      userId: 123
    };
  }
};
</
script>

在 React 中的路由参数使用:

import { useParams } from 'react-router-dom';

function UserProfile({
  const { id } = useParams();
  return <div>User Profile: {id}</div>;
}

「查询参数:」

  • 「定义方式:」 查询参数是通过 URL 的查询字符串传递的,以 ? 开头,多个参数使用 & 分隔。例如: /search?q=keyword&page=1
  • 「用途:」 查询参数适用于传递附加信息,如搜索关键字、分页页码等。不同页面间可以使用相同的路径,通过不同的查询参数来实现不同的功能。
  • 「在 Vue 项目中使用:」 在 Vue 项目中,你可以通过 this.$route.query 来访问查询参数的值。
  • 「在 React 项目中使用:」 在 React 项目中,你可以使用 useLocation() 钩子和 query-string 库来获取和解析查询参数的值。

在 Vue 中的查询参数使用:

<template>
  <div>
    <router-link :to="{ path: '/search', query: { q: 'keyword' }}">Search</router-link>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  /
/ ...
};
</
script>

在 React 中的查询参数使用:

import { useLocation } from 'react-router-dom';
import queryString from 'query-string';

function SearchResults({
  const location = useLocation();
  const queryParams = queryString.parse(location.search);
  const keyword = queryParams.q;
  
  return <div>Search Results for: {keyword}</div>;
}

总之,路由参数和查询参数都是用于在不同页面之间传递数据的方式。路由参数更适用于标识唯一资源,查询参数则适用于传递附加信息或选项。

下一篇文章将分享「路由预加载、懒加载」,欢迎点赞、关注、转发~ alt

本文由 mdnice 多平台发布

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

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

相关文章

AD域组策略开机脚本客户端不执行:解决方法

本例实现的计算机开机重置本地管理员的密码 1、创建组策略 2、在AD域中添加脚本 3、注意脚本的路径&#xff1a;就是打开 Show Files 目录 4、本例建了2个脚本&#xff0c;一个是用来测试的 &#xff08;1&#xff09;CreateFile.ps1 文件&#xff1a;用来在D盘创建一个 file…

Linux权限

Linux中一切皆文件&#xff0c;那么文件就应该有相对于的类型&#xff0c;而在Linux当中&#xff0c;类型不是直接看后缀来决定的。 -普通文件、文本、可执行、归档文件等d目录b块设备、block、磁盘c字符设备、键盘、显示器p管道文件s网络socket文件l链接文件 link 然后后面的九…

C++入门:引用是什么

目录 1.引用的概念 2.引用的特征 3.常引用 4.引用使用场景 5.传值&#xff0c;传引用效率比较 6.引用与指针的区别 1.引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用…

对象的遍历方法

文章目录 对象的遍历 对象的遍历 方法描述遍历不可枚举属性遍历继承属性遍历Symbol属性Object.keys(obj)Object.values(obj)Object.entries(obj)返回给定对象的自身可枚举属性组成的数组for-in遍历对象的属性&#xff0c;包括原型链上的可枚举属性√Object.getOwnPropertyName…

Can‘t find end of central directory : is this a zip file ? at XMLHttpRequest

导出woed出现这个报错,原因其实很简单,路径写错了, 这个word首先必须是docx格式,然后必须放在public文件包下 如果放在public文件包下还没有用,则放在public包下 参考帖子: https://www.cnblogs.com/hejun26/p/13647927.html

数据结构——栈和队列

栈和队列的建立 前言一、栈1.栈的概念2.栈的实现3.代码示例&#xff08;1&#xff09;Stack.h&#xff08;2&#xff09;Stack.c&#xff08;3&#xff09;Test.c&#xff08;4&#xff09;运行结果&#xff08;5&#xff09;完整代码演示 二、队列1.队列的概念2.队列的实现3.代…

容器和云原生(三):kubernetes搭建与使用

目录 单机K8S docker containerd image依赖 kubeadm初始化 验证 crictl工具 K8S核心组件 上文安装单机docker是很简单docker&#xff0c;但是生产环境需要多个主机&#xff0c;主机上启动多个docker容器&#xff0c;相同容器会绑定形成1个服务service&#xff0c;微服务…

在vue中使用codemirror格式化JSON

1. 下载指定版本的包 (避免引发不必要的错误) yarn add codemirror^5.64.02. 导入需要的文件 import CodeMirror from codemirrorimport codemirror/addon/lint/lint.cssimport codemirror/addon/fold/foldgutter.cssimport codemirror/lib/codemirror.cssimport codemirror/t…

【C++/C 实现球球大作战】

目录 1.引言2.游戏设计&#xff1a;概述游戏的玩法和操作方式。3.游戏实现&#xff08;1&#xff09;函数 GameInit() 初始化游戏的函数。&#xff08;2&#xff09;函数 GameDraw() 用于绘制游戏场景的函数。&#xff08;3&#xff09;函数 keyControl(int speed) 负责处理键盘…

《动手学深度学习》-20卷积层里的填充和步幅

沐神版《动手学深度学习》学习笔记&#xff0c;记录学习过程&#xff0c;详细的内容请大家购买书籍查阅。 b站视频链接 开源教程链接 卷积层里的填充和步幅 应用5x5大小的卷积核&#xff0c;输入32x32&#xff0c;输出会变为28x28。 更大的卷积核更快地减小输出大小。 导致网…

【数据治理】什么是数据库归档

文章目录 前言什么是数据归档 前言 如果您的日常工作中需要对数据库进行管理&#xff0c;那您肯定已经或即将遭遇这样的困惑&#xff1a;随着业务的蓬勃发展&#xff0c;数据库文件的大小逐渐增大&#xff0c;您需要为在线业务提供越来越大的高性能磁盘容量&#xff0c;但数据…

Angular中 ng-template 和 ng-content 有何区别?

在Angular中&#xff0c;ng-template 和 ng-content 都是用于管理和展示内容的指令&#xff0c;但它们在使用和功能上有一些区别。让我为你解释一下它们的区别&#xff0c;并提供一些示例来说明。 ng-template: ng-template 是一个用来定义可重用模板的容器。它本身不会被渲染…

微信公众号网页开发调用扫一扫及苹果手机(iOS)无反应问题解决方案

二维码大家都很常见&#xff0c;使用场景也很多&#xff0c;但是日常使用中有两种场景比较常见。 1、二维码背后的内容是一个网址&#xff0c;扫描后直接跳转到对应的网址&#xff0c;比如&#xff1a;宣传海报&#xff0c;跳转到直播间、微官网或者微信公众号。 2、二维码背后…

鲁图中大许少辉博士八一新书《乡村振兴战略下传统村落文化旅游设计》山东省图书馆典藏

鲁图中大许少辉博士八一新书《乡村振兴战略下传统村落文化旅游设计》山东省图书馆典藏

ubuntu 安装 postgresql以及 wal回滚

安装 sudo apt install postgresql postgresql-contrib设置远程连接 修改/etc/postgresql/12/main/postgresql.conf **将listen_addresses 改成 ***修改/etc/postgresql/12/main/pg_hba.conf 找到如下信息 #IPv4 local connections: 修改为 host all all 0.0.0.0/0 md5 重启…

Git问题:解决“ssh:connect to host github.com port 22: Connection timed out”

操作系统 Windows11 使用Git IDEA 连接方式&#xff1a;SSH 今天上传代码出现如下报错&#xff1a;ssh:connect to host github.com port 22: Connection timed out 再多尝试几次&#xff0c;依然是这样。 解决 最终发现两个解决方案&#xff1a;&#xff08;二选一&#xf…

反转链表II

江湖一笑浪滔滔&#xff0c;红尘尽忘了 题目 示例 思路 链表这部分的题&#xff0c;不少都离不开单链表的反转&#xff0c;参考&#xff1a;反转一个单链表 这道题加上哨兵位的话会简单很多&#xff0c;如果不加的话&#xff0c;还需要分情况一下&#xff0c;像是从头节点开始…

剑指Offer51.数组中的逆序对 C++

1、题目描述 在数组中的两个数字&#xff0c;如果前面一个数字大于后面的数字&#xff0c;则这两个数字组成一个逆序对。输入一个数组&#xff0c;求出这个数组中的逆序对的总数。 示例 1: 输入: [7,5,6,4] 输出: 5 2、VS2019上运行 使用方法一&#xff1a;归并排序 #inclu…

创建型(一) - 简单工厂模式、工厂方法模式和抽象工厂模式

本文使用了王争老师设计模式课程中的例子&#xff0c;写的很清晰&#xff0c;而且中间穿插了代码优化。 由于设计模式就是解决问题的一种思路&#xff0c;所以每个设计模式会从问题出发&#xff0c;这样比较好理解设计模式出现的意义。 一、简单工厂模式 解决问题&#xff1a…

淘宝Tmall1688京东API接口系列,海量数据值得get!

Api接口也就是所谓的应用程序接口&#xff0c;api接口的全称是Application Program Interface&#xff0c;通过API接口可以实现计算机软件之间的相互通信&#xff0c;开发人员可以通过API接口程序开发应用程序&#xff0c;可以减少编写无用程序&#xff0c;减轻编程任务&#x…