指标: 继续输入！每日分享对于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>;}

总之，路由参数和查问参数都是用于在不同页面之间传递数据的形式。路由参数更实用于标识惟一资源，查问参数则实用于传递附加信息或选项。

下一篇文章将分享路由预加载、懒加载，欢送点赞、关注、转发～

本文由mdnice多平台公布