前言

本博客仅供参考,如有任何违反,请立即与我们联络

科普：路由

路由相关定义

路由器

机制：路由和转送

• 确定从源到目标的路径
• 从输入向适当输出传输数据

路由表

它基本上是一个映射表,它决定了数据包的方向

• 内网IP->电脑mac

网络

• 公共网络IP:网络单元的独特识别
• 内网IP：192.168.1.1
• Mac地址:电脑独特识别

更改URL不会更新的方式

更改URL Hash

在网络 Konsole中

• location.hash=‘home’

使用history

history.pushState({},‘’,‘home’)

• 入栈

history.back

• 出栈

history.go()

• -1:等于背面
  1：等同于history.forward
  可以弹出或压入多个

history.replaceState({},‘’,‘home’)

• 替换

路由的使用

1. 安装路由器插件
2. 配置路由信息( index.(js)

路由器相关特性

路由器链接标签属性

tag

• 渲染后的组件类型

replace
active-class

• 更改主动链接的类名

更改URL

• this.$router.push(‘/path’)
• this.$router.repalce

获取URL

• this.$route.params.abc

路由的懒加载

用到时再加载

• 懒加载的方式

嵌套路由

在路由器文件夹中的索引。 在js下添加映射关系

• children:[{}]

在相应的组件中增加

路由之间传递参数

• 参数(参数)

1. 配置路由器格式:/router/:id
2. 如何传递:跟踪路径后面的相应值
3. 传输后路径:/router/123

• query(查询)

1. 正常路由器配置:/路由器
2. 传输方法:查询中使用的键作为对象中的传输方法
3. 经过后形成的路径:/router?id=123

URL格式：协议://主机:端口/路径?查询#片段 scheme://host:port/path?query#fragment

$route/router

$router
整个路由实例
$route
当前处于活跃的路由
所有组件继承Vue的原型

路由导航守卫

前置钩子

• router.beforeEach((to,from,next) => {})
  next()//必须被调用

AfterEach((到,从))

路由状态保存

属性

• include/exclude：字符串或正则表达式
  匹配的组件缓存与否

具体地说,有两个可能的功能

• activated/deactivated
  活跃与否

使用路径变量记录路径,离开时实现路由缓存

前端渲染和后端渲染

一、后端渲染

后端处理URL与页面之间的映射关系

• URL发送到服务器，服务器会通过正则对URL进行匹配，最后交给Controller进行处理

jsp:java serve page/PHP

• java代码作用
  从数据库中读取数据并将其动态地放在页面上

二、前后端分离阶段

网页内容主要由浏览器的前端的js代码执行

• 后端分为静态资源服务器,并提供API接口服务

页面渲染过程

1. 通过URL获取静态资源(html,css,js)
2. js代码由浏览器执行,Ajax使用API接口请求数据
3. 从API服务中获取数据,并从浏览器中渲染js代码

前端渲染:单页应用阶段(SPA)

前端路由

• 由浏览器管理的URL和页面之间的关系地图

核心

• 更改URL,页面没有完全更新
• 整个页面只有一个html页

总结

小小励志

有些事情你现在不做,你一生也不会做。
如果你想做某事,世界会给你一条路。
《搭车去柏林》

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/30977.html。