likes
comments
collection
share

跟着chatGPT学前端系列-谈谈路由

作者站长头像
站长
· 阅读数 14

问题背景

害，主要是我这两天面试也被反复面到了这个路由相关的问题，所以想记录一下

莉莉丝和海康威视都问到了啊啊啊我都没咋了解过。

开始恶补...

vue-router

我：说说vue-router

ChatGPT：Vue-Router 是一个官方的 Vue.js 路由管理器。它将 Vue.js 应用程序分解成视图，每个视图可以映射到一个 URL 。

其主要功能包括以下方面：

  • 路由映射-允许将 URL 映射到视图。
  • 导航-允许用户从一个视图导航到另一个视图。
  • 路由参数-允许您动态传递参数到视图。
  • 嵌套路由-可以将多个路由映射为单个路由。
  • 路由懒加载-只有在视图需要呈现时才加载组件,加速应用程序启动时间。
  • 路由钩子函数-可以在路由变化时执行一些函数。
  • 命名路由-为路由指定特定的名称。
  • 路由元信息-可以为路由添加元信息，提供更多的灵活性。

Vue-Router 可以帮助我们构建一个全面的前端路由应用程序，处理所有可能的路由方案，从而获得更好的用户体验，同时也节省了服务器请求的负担。

我们可以根据ChatGPT的回答去有意识地侧重一些回答要素

比如说，路由的概念？路由是用来干什么的？解决什么问题？有什么样的功能？对吧。

这些问题也可以对自己提问，看看自己会不会，脑子里边有没有构建关于这块的知识体系

我：我大概了解了，那请问路由有几种模式？

ChatGPT：好的。

Vue-Router 支持两种不同的路由模式： hash 模式和 history 模式。

  1. hash 模式：是这种模式下， URL 中会带有 # 符号，核心路由实现使用浏览器自带的 hashchange 事件。当用户在应用程序内导航时，只会更改 # 符号后面的部分，浏览器不会向服务器发送请求，因此不会刷新页面。
  2. history 模式：该模式下， URL 中没有 # 符号。路由使用 HTML5 History API 来实现，使用它可以使 URL 更加真实，但是它需要在服务器端进行一些额外的配置，以确保在发送到服务器的任何 URL 上都会响应相同的 Vue.js 应用程序。

我们可以通过在创建 VueRouter 实例时传递不同的 mode 属性值来选择路由的模式。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history', // 这里选择 history 模式
  base: process.env.BASE_URL,
  routes
})

export default router

我：能不能详细说说这两种路由的原理，以及他们之间的区别？（面试考点）

ChatGPT：好的，没问题。

Vue-Router 支持两种不同的路由模式： hash 模式和 history 模式。它们的实现原理和区别如下：

hash 模式

在 hash 模式下， URL 中会带有 # 符号。例如：

http://example.com/#/home

当用户在应用程序内导航时，只会更改 # 符号后面的部分，浏览器不会向服务器发送请求，因此不会刷新页面。相反，它会触发浏览器自带的 hashchange 事件，通过监听该事件我们就可以在应用程序内导航，实现路由跳转。

浏览器不发送请求的原因是因为 # 符号后面的内容只是 URL 的一个片段（Fragment），不会被包括在 HTTP 请求中，所以服务器不会收到片段的内容。

history 模式

在 history 模式下， URL 中没有 # 符号。例如：

http://example.com/home

路由使用 HTML5 History API 来实现，使用它可以使 URL 更加真实，但是需要在服务器端进行一些额外的配置，以确保在发送到服务器的任何 URL 上都会响应相同的 Vue.js 应用程序。

HTML5 History API 提供了 pushState() 和 replaceState() 两个方法，可以在不刷新页面的情况下修改浏览器的历史记录，以此实现前端路由。

需要注意的是，在 history 模式下，直接在浏览器地址栏中输入一个路由地址是无法实现路由跳转的。如果不是通过应用程序内部跳转，而是直接在浏览器中输入一个 URL 地址，或者通过刷新页面打开一个 URL 地址，就会向服务器发送请求，但是由于服务器没有对该 URL 地址进行配置，就会返回 404 错误页面。

区别

总的来说，hash 模式和 history 模式的本质区别在于，前者使用 URL 的片段进行路由，而后者使用 HTML5 History API 提供的 pushState 和 replaceState 方法，修改浏览器的历史记录，以此实现路由跳转。

相对于 hash 模式，history 模式使用真实的 URL 地址更加真实，可以有效地做到 SEO 优化。但是，它需要在服务器端进行额外的配置，保证在向服务器发送任何 URL 地址时都能正确响应相应的 Vue.js 应用程序。

今天这期就到这里啦~我是dazzlingwen，跟着我学前端不迷路，我们下期再见 😘 😘