Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
文章目录
- 一、参考资料
- 二、运行环境
- 三、页面跳转问题
-
- 3.1 MPA多页面
- 3.2 SPA单页面
- 3.3 MPA比较SPA
- 3.4 SPA总结
- 四、vue-router 路由插件
-
- 4.1 路由的理解
- 4.2 路由分类
-
- 4.2.1 后端路由
- 4.2.2 前端路由
- 4.3 Vue2路由的使用
- 4.4 Vue2路由使用的注意点
- 4.5 多级嵌套路由
- 4.6 vue-router路由传参
-
- 4.6.1 query传参
- 4.6.2 params传参
- 4.6.3 props配置传参
- 4.7 命名路由
- 4.8 replace属性
- 4.9 编程式路由导航
- 4.10 缓存路由组件
- 4.11 激活与失活钩子函数
- 4.12 路由元信息
- 4.13 路由导航守卫
- 4.14 路由器的工作模式
- 五、Vue2项目打包与部署
-
- 5.1 Node.js库解决history模式路由的问题
一、参考资料
视频资料
二、运行环境
- Windows11
- Visual Studio Code v2022
- Node.js v16.5.01
- Vue/cli v5.0.6
- Bootstrap 5.1.3
三、页面跳转问题
参考文章：点击查看
3.1 MPA多页面
MPA，即 MultiPage Application，指由多个独立html页面的应用，每个页面需要重复加载js、css等资源，页面切换由HTML文档进行控制，返回结果是HTML文档。
案例：index.html 和 about.html 两个静态页面之间的跳转，效果图如下：
index.html
DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="page-header"><h2>Vue2路由案例h2>div>
div>
div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2">
<div class="list-group">
<a class="list-group-item active" href="./index.html">主页a>
<a class="list-group-item" href="./about.html">关于我们a>
div>
div>
<div class="col-sm-6">
<div class="panel">
<div id="panel" class="panel-body">
<h1>主页h1>
div>
div>
div>
div>
div>
body>
html>
about.html
DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %>title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="page-header"><h2>Vue2路由案例h2>div>
div>
div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2">
<div class="list-group">
<a class="list-group-item" href="./index.html">主页a>
<a class="list-group-item active" href="./about.html">关于我们a>
div>
div>
<div class="col-sm-6">
<div class="panel">
<div id="panel" class="panel-body">
<h1>关于我们h1>
div>
div>
div>
div>
div>
body>
html>
特点： URL发生变化、全局页面重新加载。
优点：
- 首次加载速度快，访问页面时，服务器返回HTML，页面就会显示出来，整个过程只经历一次HTTP请求。
- SEO效果好，搜索引擎在做网页排名时，会根据网页的内容来评判与排名。搜索引擎可是被HTML内容，多页面的应用则有更高的排名。
缺点：
- 页面切换速度慢，每次跳转都要发送一个HTTP请求，如果网络卡，那么页面跳转的时候就会发送卡顿，影响用户体验。
- 容易影响用户体验，如果网络慢，页面加载半天都加载不完，用户体验会很差。
3.2 SPA单页面
SPA，即 Single Page Web Application，是指单页面的Web应用，别名 CSR（Client Side Render），即客户端渲染。它所需的资源，如HTML、CSS和JS等，在一次请求中就加载完成。
浏览器渲染是指所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。
对于SPA来说，页面的切换就是组件或视图之间的切换。
简单地说，SPA应用程序只有单个HTML页面文件，在Vue中可通过vue-router插件来局部切换组件，而不用刷新整个页面，从而实现无刷新切换页面。
SPA原理
参考资料：点击查看
SPA的重要实现之一就是改变路由时，页面不刷新。实现这个功能通常有两种方式，分别是适用 window.history对象 或 location.hash。
window.history 包含了浏览器的历史信息，常用的方法有：
history.back() // 相当于在浏览器点击后退按钮
history.forward() // 相当于在浏览器点击前进按钮
history.go(n) // 接收一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forawrd()，go(-1)则相当于back()，go(0)相当于刷新当前页面。
HTML5 对 history对象新增了 pushState() 和 replaceState() 方法，这两个方法可以往历史栈中添加数据，给用户的感觉就是浏览器的URL改变了，但是页面并没有重新刷新，
pushState()是在浏览器记录中添加一个新的记录，replaceState()则是修改当前的浏览器记录，这是二者的差别，除此之外。使用时参数的字段和含义都一样。
window.history.pushState(state, title, url)
hash 是 location对象的属性，它是指URL的锚，即从#号开始的部分，修改location.hash并监听 window。hashchange事件也能达到同样的效果。
注：vue-router插件中Vue不支持 onHashChange事件，需要vue-router插件里的钩子函数解决。
特点： URL发生变化、整体页面不用重新加载，局部页面发生变化。
优点：
- 页面切换速度快，由于页面每次切换时，不需要HTML文件的请求，这样节省了很多http发送时延。
- 用户体验极佳，页面局部切换快，尤其是移动设备，尽管在网络环境查，由于组件是预先加载好的，所以不用发网络请求，使得用户有更好的视觉体验。
- 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各尽其职，不会混乱。
- 减轻服务器的压力，服务器只需要出数据，不用管展示的逻辑和页面合成，提高了吞吐量。
- API共享，同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
- 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。
缺点：
- 首次加载速度慢，首次加载需请求一次HTML，同时还要发送若干次JS请求，相当于MPA会慢一点。
- SEO效果差，因为搜索引擎只识别HTML的内容，不识别JS，而单页面应用内容都是靠JS代码渲染出来的，搜索引擎不识别这部分内容，固然不会给好的排名，这就导致SPA应用做出来的网页在各大搜索引擎，比如谷歌、百度等上面的排名较低。
- 较高的前端开发门槛，对技术能力要求较高，需对设计模式有一定的理解，因为面对的不只是简单的页面，而是一个运行在浏览器里面的应用。
3.3 MPA比较SPA
参考：点击查看
| 单页面应用 SPA | 多页面应用 MPA | |
|---|---|---|
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 跳转方式 | 单个页面片段删除或隐藏，加载另一个页面片段并显示。片段之间模拟跳转，不离开外壳页面。 | 页面之间的跳转是从一个页面到另一个页面 |
| 资源公用性（CSS和JS） | 公用，只需在外壳页面加载 | 不共用，每个页面要单独加载 |
| 刷新方式 | 页面局部刷新或更改 | 整个页面进行刷新 |
| URL模式 | xxx.com/#/page1，xxx.com/#/page2 | xxx.com/page1.html ，xxx.com/page2.html |
| 用户体验感 | 页面切换快，用户体验好（包括移动设备） | 页面切换加载慢，用户体验差，尤其是在移动设备 |
| 转场动画 | 易实现 | 无法实现 |
| 页面之间的数据传递 | 容易（Vuex或Vue中的父子组件通信 | 困难，依赖URL传参，或Cookie、localStorage和IndexDB等 |
| 搜索引擎优化（SEO） | 困难，可采取服务器端渲染（SSR）优化 | 容易实现 |
| 适用范围 | 高体验需求、追求界面流畅度的应用 | 适用于追求高度支持搜索引擎的应用 |
| 开发成本 | 较高，需借助专业的框架，如React、Vue等来降低开发难度 | 较低，但页面重复的代码多。 |
| 维护成本 | 相对较低 | 相对较高 |
3.4 SPA总结
在Vue开发中，使用的就是SPA单页面开发的设计模式。
SPA的特点再次总结如下：
- SPA，Single Page Web Application，指单页Web应用。
- 整个应用只有一个完整的页面。
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 部分数据需要通过 ajax请求获取。
四、vue-router 路由插件
4.1 路由的理解
路由的特点：
- 一个路由就是一组映射关系（key - value）
- key 为路径，value 可能是 function 或者 component 组件
4.2 路由分类
4.2.1 后端路由
value是 function 函数，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
4.2.2 前端路由
value是component，用于展示页面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示。
4.3 Vue2路由的使用
vue-router
包含功能：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式
- 自定义的滚动条行为
Vue2版本目前可以使用的最新路由插件是 vue-router@3，而Vue3则可以使用最新的vue-route@4
第一步，在Vue脚手架项目中安装vue-router@3插件
npm i vue-router@3
第二步，将路由组件放到单独的文件夹，比如pages文件夹
About.vue
<template>
<div>
<h1