vue-Router前端路由

1.什么是前端路由

官方网站
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

1.1路由器

首先大家知道路由器，路由器是把一个外部的网线（公网ip地址，必须是唯一的，相当于人的身份证号，不然发送消息访问网站不知道去哪里找服务器），然后路由器会建立局域网建立路由表然后分发内网ip（意思是在一个封闭的环境下，使用内网ip做唯一，路由表就是把内网ip地址和电脑进行绑定然后转发）

1.2后端渲染、路由

后端渲染：
是指前端发送请求-》然后后台服务（java、php、C#）接收到网络请求然后从后端渲染html+Css的界面然后直接返回给前端（jsp、php、lsp）这种方式因为是后台生成的所以对seo和安全性比较好
后端路由：
而哪一个界面对应哪一个界面是由服务器维护的这就是后端路由

1.3前端路由发展阶段

前后端分离

前端固定好界面使用Html+css+js，然后通过ajax异步去加载网页。
前端负责界面框架（假设是毛坯楼房）后台负责提供各式各样的数据（装修材料、家电家具），ajax技术异步加载（装修工人），然后你的房子就能住人了，你家的门牌号就是你的url网址

SPA单页面富应用

SPA整个界面只有一个html界面，前端有一个整体的页面框架，然后还有一堆组件也就是模块，当用户触发界面切换事件，前端路由根据地址找到对应的模块请求后台数据渲染界面再加载到指定的位置，就不需要每次点击都要去跳转到另一个界面然后重新请求静态资源然后再去请求数据了。
其实和前后端分离就多了一个url路由功能
路由规则就是一旦url改变则抽取所需的html+css+js进行渲染界面，不刷新界面只是用代码更换界面显示。

2.url栈操作

2.1创建项目

2.2更改界面url不刷新界面

更改url的hase

html5的history模式

这个是维护了一个栈结构，每次都在压栈让最新的url在最上边

而替换则是将最上层的url换掉，所以这个不能返回到之前的界面，但可以返回上上次的界面。

这是三种操作栈的方法

3.安装使用

3.1安装

• 创建项目的时候选择安装路由
• 执行命令

npm install vue-router --save

3.2使用

3.2.1vue-router引用

• 导入路由对象，并且调用Vue.use(VueRouter)
• 创建路由实例，并且传入路由映射配置
• 在vue实例中挂在创建的路由实例

3.2.2vue-router使用

创建路由组件

其实就是index.js，现在会自动生成
现在删除helloWorld组件和相关的引用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bt4VSPdM-1607937126636)(en-resource://database/1050:1)]

配置路由关系

在这里注意一下导入导出模块儿和模块名字

使用路由标签

默认路径

url路径带有#号

这样是因为使用的hase模式进行的url改变，如果使用history就不会出现这个问题

router-link属性配置

• tag属性
  当前标记被渲染成什么组件
• replace属性
  如果mode使用的history那么它使用的是pushstate方法，添加该属性是否可以回退上一个界面
• class router-link-active
  class为router-link-active则是当前界面是哪个界面
  

如果不喜欢这个名称可以修改（不建议修改）
添加active-class属性指定活跃窗口class

也可以在index.js当中批量配置

代码控制跳转

重复跳转异常问题

如果重复跳转相同的界面会产生如下的错误，这时可以自行判断跳转时拒绝跳转到相同的界面

如果使用的是 this.$router.push或者router-link to，则在router下的index将异常catch住就可以了

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

如果使用的是replace方法则需要手动判断

restful风格的url传值

• 创建user模块
  
• 设置路由表
• 使用user模块
  
• user接收参数
  

4.路由懒加载

说明

因为如果是一个html界面模块儿化开发，js文件会非常巨大，最好的做法是，当界面显示什么就加载哪些资源这样更高效。
路由懒加载主要是将对应的组件打包成一个个的js代码块然后做到界面显示什么加载什么。

实现方式

项目打包

• app.js：基本就是你实际编写的那个app.vue(.vue或.js?),是界面加载的入口js

• vendor.js:通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分）还包含各种的依赖信息（导入导出），vendor的文件大小最大，因为其包含了vue整一个框架的代码，以及webpack的模块化代码。

• manifest.js: 被注入了webpackJsonp的定义及异步加载相关的定义(webpack调用CommonsChunkPlugin处理后模块管理的核心,因为是核心,所以要第一个进行加载,不然会报错)一些异步加载的实现方法（通过建立script方式动态引入js），内容上包含异步js的文件名和路径。

5.嵌套路由

• 创建子组件
  
• 设置路由
  
• 在父组件添加引用
  

6.参数传递

参数传递类型

• params方式
  就是restful风格url传值
• query方式
  就是带参传值，类似于get方式请求，将参数放在url后边

实现

router-link跳转

为了节省时间我直接使用了userSon模块儿，修改router-link标签

界面回显数据

click事件跳转

不使用router-link改为button，绑定点击事件然后使用代码跳转。

$router和$route

router是全局的路由器，可以获得路由表，跳转记录
route是当前活动的路由，可以获得当前路由的名称参数url

7.导航守卫

作用

监听界面url改变

实现

这里因为可能出现嵌套路由所以保险起见从matched【0】这个位置取值

8.keep-alive

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
vue-router内置的组件router-view如果被keep-alive包裹，那所有路径匹配到的视图组件会被缓存。

属性

exclude：“组件名称”
禁止界面缓存支持正则表达式
include:“组件名称”
根据表达式匹配的组件进行缓存