浅谈路由

104 阅读1分钟

前端的三大框架Vue,React,Angular面对路由都有自己一套的api,但它们的底层原理是一致的。

路由的作用

首先路由的作用就是用来进行请求的分发,也就是浏览器就是根据我们访问的不同路由来向不同的服务器发送请求。

路由的三种模式

路由常见的有三种模式,分别是 history , hash ,memory 。

接下来就直接用实际的例子来展示下不同模式下的url的表现形式

  • hash模式

    此模式在url中的表现形式如下。(典型的特点就是这个#)

google.com/#11   
google.com/#22
  • history

    • 应该是浏览器中的常见形式了
google.com/title
google.com/createTitle
  • memory模式

    • 特点:

      • 上面的hash和history模式都是将路由存在url中,而对于那些不将路由存在URL中的模式就称为memory模式。
    • 表现形式

      • 比如一般在localStorage中用对象来存储当前的路由。

路由的常见概念

  • 默认路由

    • 意思就是当路径中的hash值或者history的值不存在的时候的路由。此时它用来展示默认内容
  • 404路由

    • 即你所访问的路由不存在的时候所展示的内容
  • 路由表:

    就是以对象的形式来存储不同路径所对应要展示的组件是啥?

const route=[
  {
    path:'/1' , component:test,
  },
  {
    path:'/2' , component:titleComponent,
  },
  ]
  • 嵌套路由

    • 啥是嵌套路由?

      • 直接举例来说,比如一个只有一层的路由, 192.168.0.0.1/user ,而192.168.0.0.1/user/login 就是嵌套路由。
    • 嵌套路由的作用是啥?

      • 还是拿192.168.0.0.1/user/login 举例,它意思就是先展示192.168.0.0.1/user这个路由的内容,再到这个路由所展示页面的某个地方展示192.168.0.0.1/user/login 这个路由代表的内容。

image.png