Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署

最新推荐文章于 2024-05-12 09:11:25 发布

「已注销」

最新推荐文章于 2024-05-12 09:11:25 发布

阅读量2.5k

点赞数 1

分类专栏：学习笔记文章标签： vue.js 学习 bootstrap

本文链接：https://blog.csdn.net/Unirithe/article/details/125454053

版权

文章目录

一、参考资料
二、运行环境
三、页面跳转问题
四、vue-router 路由插件
五、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">
    <!-- CSS only -->
    <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>
    <!-- CSS only -->
    <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>About组件的内容</h1>
  </div>
</template>

<script>
export default {
     
    name: 'About',
    beforeDestroy(){
     
      console.log('About组件即将被销毁')
    }

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署

Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
复制链接

扫一扫