001 - 邂逅vue-router

coderklaus
89 阅读5分钟

Vue Router是Vue官方提供的，用于实现客户端路由导航的插件

通过Vue Router，我们可以在不刷新页面的情况下，轻松实现路由导航

路由导航就是指在一个Web应用程序中从一个页面(或者路由)到另一个页面(或者路由)的过程

Vue Router使用路由表来描述组件和URL之间的映射关系，当用户在浏览器中导航到一个特定的URL时，Vue Router会根据预先定义的路由规则找到该URL对应的组件，并在视图中找到合适的位置渲染该组件

# 默认是vue-router@3
# 在安装的时候需要手动指定主版本号
npm install vue-router@4

路由

路由指的是根据 URL 将请求映射到相应的处理程序或资源的过程

也就是说，路由负责解析URL，并决定应该展示哪个页面或响应哪个API请求

后端路由

早期的网站开发中，服务器通常会直接生成渲染好对应的HTML页面，并将它返回给客户端进行展示, 这种操作被称为后端路由

为了处理多个页面，服务器会使用正则表达式对URL进行匹配，并将请求交给一个Controller进行处理

Controller会进行各种处理，最终生成HTML或数据，并将其返回给前端展示

前端路由

随着Ajax的出现，前后端分离的开发模式逐渐流行起来

与后端路由相比，前端路由是在前端浏览器端进行页面渲染，而不是在后端服务器端进行页面渲染

浏览器向静态资源服务器请求静态资源（如HTML、CSS、JS等) , 并向后端API服务器请求数据，整个页面的渲染过程都在客户端完成

后端只提供API来返回数据，前端通过Ajax获取数据，并通过JavaScript将数据渲染到页面中，生成最终的页面展示给用户

浏览器每次请求都会从静态资源服务器请求静态资源（如HTML、CSS、JS等），后端只需要提供API来返回数据即可

对比

前端路由的最大优点是前后端职责的清晰，后端专注于数据，前端专注于交互和可视化，后端只要维护一套 API 就可以同时适用于移动端和web端

相比于前端路由，后端路由对SEO更加友好且具有更快的首屏加载速度，因为渲染好的页面不需要单独加载任何js和css，可以直接交给浏览器展示，也可以直接被爬虫引擎所爬取

然而，后端路由的缺点也是显而易见的，通常情况下，后端路由会将HTML代码、数据以及对应的逻辑混合在一起，导致编写和维护十分困难

渲染模式

SPA

单页面富应用（SPA）的最主要特点是在前后端分离的基础上加了一层前端路由

前端路由的核心就是在改变URL的时候，可以只进行局部更新，而不是进行页面的整体刷新

SPA通过前端路由来实现不同页面之间的切换，提供更好的用户体验

前端路由可以通过原生JavaScript来实现，也可以使用现成的框架如React Router、Vue Router等来简化开发流程

SSR

同构应用（SSR）的主要特点是在前后端分离的基础上，使用同一套代码同时在服务端和客户端进行渲染，以提供更好的首次加载性能和更好的SEO支持

在同构应用中，当用户请求某个路由时，服务器会先执行相应的路由处理逻辑，并在服务器上生成完整的HTML页面，包括路由对应的数据和视图

然后，将生成的HTML页面发送给客户端，客户端接收到HTML后可以直接展示，无需再进行客户端渲染

当用户进一步与同构应用交互时，客户端的JavaScript代码接管页面控制，并通过前端路由来进行页面的局部更新和交互

这样可以在保持前端交互能力的同时，利用服务端渲染提供更好的首次加载性能和SEO优化

路由挂载

定义路由映射规则

image-20230706214315499

注册路由

import { createApp } from 'vue'
import App from './App.vue'
import router from '/src/routes'

const app = createApp(App)

// vue-router是vue的一个官方路由插件
// 所以通过use方法进行挂载
app.use(router)

app.mount('#app')

当vue-router被正常挂载后，就可以在模板和脚本中获取并使用路由表对象和当前路由对象

composition apioption api
template通过$router获取路由表对象
通过$route获取当前路由对象		通过$router获取路由表对象
通过$route获取当前路由对象
javascript通过this.$router获取路由表对象
通过this.$route获取当前路由对象		通过useRouter()获取路由表对象
通过useRoute()获取当前路由对象

$router对象和直接使用通过 createRouter 创建的 router 实例完全相同

使用$router的唯一原因仅仅只是不想在每个需要操作路由的组件中都导入路由表对象

在模板中使用

image-20230706211536957

当vue-router被挂载后，会挂载两个全局组件router-view和router-link

router-link

router-link是Vue Router提供的一个全局组件，用于生成跳转链接，方便用户在不同的路由之间进行导航

router-link具有以下特点

  1. 可以在不刷新页面的前提条件下进行视图组件的更新

  2. 自动生成对应的URL，并自动进行编码和解码，避免了手动拼接URL的繁琐

在默认情况下，router-link会被渲染为原生a元素，其中router-link的to属性 对应着 a元素的href属性

<router-link to="/hello-vue">Vue</router-link>
<!-- 最终渲染为 -->
<a href="/hello-vue">Vue</a>

router-view

router-view是Vue Router提供的全局组件，用于声明当前路由匹配组件所需要被渲染的位置

也就是说router-view的功能是进行路由占位，因此也被称为路由出口

一个Vue应用中可以存在多个router-view，一个页面中也可以存在多个router-view

每个router-view会根据路由匹配规则渲染对应的组件，从而可以实现更为灵活的页面渲染功能

avatar
文章
阅读
粉丝