动力节点Vue笔记 六、路由route

路由route

6.1 传统web应用vs单页面web应用

传统web应用
传统web应用，又叫做多页面web应用：核心是一个web站点由多个HTML页面组成，点击时完成页面的切换，因为是切换到新的HTML页面上，所以当前页面会全部刷新。

单页面web应用（SPA：Single Page web Application）
整个网站只有一个HTM页面，点击时只是完成当前页面中组件的切换。属于页面局部刷新。


单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。单页面的跳转仅刷新局部资源。因此，对单页应用来说模块化的开发和设计显得相当重要。
单页面应用的优点：
1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端
单页面应用的缺点：
1、首次加载耗时比较多。
2、[SEO](https://so.youkuaiyun.com/so/search?q=SEO&spm=1001.2101.3001.7020" \t "https://blog.youkuaiyun.com/weixin_66557048/article/details/_blank)问题，不利于百度，360等搜索引擎收录。
3、容易造成CSS命名冲突。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
单页面和多页面的对比

目前较为流行的是单页面应用的开发。
如果想使用Vue去完成单页面应用的开发，需要借助Vue当中的路由机制。

6.2 路由route与路由器router

路由：route
路由器：router
每一个路由都由key和value组成。
key1+value1===>路由route1
key2+value2===>路由route2
key3+value3===>路由route3
…
路由的本质：一个路由表达了一组对应关系。
路由器的本质：管理多组对应关系。
Vue中路由的工作原理：

6.3 使用路由

1. 实现功能描述

1. 根据静态页面提取两个组件：Tea.vue和Fruit.vue

1. vue-router也是一个插件，安装vue-router
   1. vue2要安装vue-router3
      1. npm i vue-router@3
   2. vu3要安装vue-router4
      1. npm i vue-router@4
2. main.js中引入并使用vue-router
   1. 导入：import VueRouter from ‘vue-router’
   2. 使用：Vue.use(VueRouter)
   3. new Vue时添加新的配置项：一旦使用了vue-router插件，在new Vue的时候可以添加一个全新的配置项：router

1. router路由器的创建一般放在一个独立的js文件中，例如：router/index.js
   1. 创建router目录
   2. 创建index.js，在index.js中创建路由器对象，并且将其暴露。然后在main.js文件中引入该路由器即可。

1. 使用router-link标签代替a标签（App.vue中）

router-link标签最终编译之后的还是a标签。vue-router库帮助我们完成的。

1. 添加激活样式

使用active-class属性，在激活时添加样式：selected

1. 指定组件的最终显示位置。

1. 测试

注意事项：

1. 路由组件一般会和普通组件分开存放，路由组件放到pages目录，普通组件放到components目录下。
2. 路由组件在进行切换的时候，切掉的组件会被销毁。
3. 路由组件实例比普通组件实例多两个属性：$route和$router
   1. $route：属于自己的路由对象。
   2. $router：多组件共享的路由器对象。

6.4 多级路由

1. 要实现的效果

1. 主要实现

6.5 路由query传参

为了提高组件的复用性，可以给路由组件传参。
怎么传？


怎么接？

6.6 路由起名字

可以给路由起一个名字，这样可以简化to的编写。
怎么起名？

怎么使用？必须使用 :to=”{}” 的方式

6.7 路由params传参

怎么接？


怎么传？

需要注意的是，如果采用params传参，使用:to的时候，只能用name，不能用path。

6.8 路由的props

props配置主要是为了简化query和params参数的接收。让插值语法更加简洁。
第一种实现方式：


第二种实现方式：函数式


第三种实现方式：直接将params方式收到的数据转化为props

6.9 router-link的replace属性

1. 栈数据结构：先进后出，后进先出原则。

1. 浏览器的历史记录是存储在栈这种数据结构当中的。包括两种模式：
   1. push模式（默认的）
   2. replace模式

1. 如何开启replace模式：

6.10 编程式路由导航

需求中可能不是通过点击超链接的方式切换路由，也就是说不使用如何实现路由切换。可以通过相关API来完成：

1. push模式：
   1. this.$router.push({

name : ‘’,
query : {}
})

1. replace模式：
   1. this.$router.replace({

name : ‘’,
query : {}
})

1. 前进：
   1. this.$router.forward()
2. 后退：
   1. this.$router.back()
3. 前进或后退几步：
   1. this.$router.go(2) 前进两步
   2. this.$router.go(-2) 后退两步
4. 使用编程式路由导航的时候，需要注意：重复执行push或者replace的API时，会出现以下错误：

这个问题是因为push方法返回一个Promise对象，期望你在调用push方法的时候传递两个回调函数，一个是成功的回调，一个是失败的回调，如果不传就会出以上的错误。所以解决以上问题只需要给push和replace方法在参数上添加两个回调即可。

6.11 缓存路由组件

默认情况下路由切换时，路由组件会被销毁。有时需要在切换路由组件时保留组件（缓存起来）。



这里的组件名称指的是：

不写include时：包含的所有路由组件全部缓存。
如何指定多个缓存路由，可以使用数组形式：

6.12 activated和deactivated

这是两个生命周期钩子函数。
只有“路由组件”才有的两个生命周期钩子函数。
路由组件被切换到的时候，activated被调用。
路由组件被切走的时候，deactivated被调用。
这两个钩子函数的作用是捕获路由组件的激活状态。

6.13 路由守卫

6.13.1 全局前置守卫

router/index.js文件中拿到router对象。
router.beforeEach((to, from, next)=>{ // 翻译为：每次前（寓意：每一次切换路由之前执行。）
// to 去哪里(to.path、to.name)
// from 从哪来
// next 继续：调用next( )
})

这种路由守卫称为全局前置路由守卫。
初始化时执行一次，以后每一次切换路由之前调用一次。

如果路由组件较多。to.path会比较繁琐，可以考虑给需要鉴权的路由扩展一个布尔值属性，可以通过路由元来定义属性：meta:{isAuth : true}

6.13.2 全局后置守卫

router/index.js文件中拿到router对象。
router.afterEach((to, from)=>{ // 翻译为：每次后（寓意：每一次切换路由后执行。）
// 没有 next
document.title = to.meta.title // 通常使用后置守卫完成路由切换时title的切换。
})
这种路由守卫称为全局后置路由守卫。
初始化时执行一次，以后每一次切换路由之后调用一次。
该功能也可以使用前置守卫实现：

该功能使用后置守卫实现更好：

解决闪烁问题：

6.13.3 局部路由守卫之path守卫

注意：没有afterEnter

6.13.4 局部路由守卫之component守卫

注意：只有路由组件才有这两个钩子。

6.13.5 前端项目上线

1. 路径中#后面的路径称为hash。这个hash不会作为路径的一部分发送给服务器：
   1. http://localhost:8080/vue/bugs/#/a/b/c/d/e （真实请求的路径是：http://localhost:8080/vue/bugs）
2. 路由的两种路径模式：
   1. hash模式
   2. history模式
3. 默认是hash模式，如何开启history模式
   1. router/index.js文件中，在创建路由器对象router时添加一个mode配置项：

1. 项目打包
   1. 将Xxx.vue全部编译打包为HTML CSS JS文件。
   2. npm run build

1. 这里服务器端选择使用Java服务器：Tomcat，接下来教大家配置Tomcat服务器：
   1. 下载JDK
      1. 
      2. 
      3. 
      4. 
      5. 
   2. 安装JDK
      1. 
      2. 
      3. 
   3. 配置环境变量：JAVA_HOME
      1. 
      2. 
      3. 
      4. 
      5. 
      6. 注意：如果你安装的路径和我安装的不一样，只要能够找到JDK bin目录的上一级目录即可。
         1. 
   4. 下载Tomcat
      1. 
      2. 
      3. 
   5. 安装Tomcat
      1. 解压就是安装。我这里直接解压到C盘的根目录下
         1. 
   6. 配置环境变量：CATALINA_HOME
      1. 
      2. 
   7. 配置环境变量：PATH
      1. 
      2. 
      3. 
   8. 启动Tomcat
      1. 打开dos命令窗口，输入startup.bat，看到以下窗口表示tomcat启动成功（注意Tomcat服务器的端口号是8080，启动Tomcat服务时最好先关闭vue脚手架，因为vue cli使用的端口也是8080，如果启动了Tomcat服务器，再启动vue脚手架的话，脚手架会另外开启一个其他的端口。）
         1. 
         2. 
         3. 如果你启动tomcat控制台有乱码也无所谓，如果实在看不下去，可以修改以下配置文件内容：
            1. 
            2. 
   9. 关闭Tomcat
      1. ctrl + c 或者：dos命令窗口中输入：shutdown.bat
   10. 将前端项目部署到Tomcat。
   11. 找到tomcat服务器的webapps目录，并找到webapps目录下的ROOT目录，清空ROOT目录
   12. 将前端项目直接拷贝放到ROOT目录下即可。
   13. 访问项目。
   14. 重启tomcat，并访问。
   15. http://localhost:8080
       1. 
2. hash模式和history模式的区别与选择
   1. hash模式
      1. 路径中带有#，不美观。
      2. 兼容性好，低版本浏览器也能用。
      3. 项目上线刷新地址不会出现404。
      4. 第三方app校验严格，可能会导致地址失效。
   2. history模式
      1. 路径中没有#，美观。
      2. 兼容性稍微差一些。
      3. 项目上线后，刷新地址的话会出现404问题。需要后端人员配合可以解决该问题。
3. 对于tomcat服务器来说，如何解决history带来的404问题，这需要后端人员写一段代码：
   1. 在ROOT目录下新建WEB-INF目录。
   2. 在WEB-INF目录下新建web.xml文件。
   3. 在web.xml文件中做如下配置：

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns=“https://jakarta.ee/xml/ns/jakartaee”
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
version=“6.0”
metadata-complete=“true”>

404 /index.html