视频资料
参考文章:点击查看
MPA,即 MultiPage Application,指由多个独立html页面的应用,每个页面需要重复加载js、css等资源,页面切换由HTML文档进行控制,返回结果是HTML文档。
案例:index.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">
<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发生变化、全局页面重新加载。
优点:
缺点:
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发生变化、整体页面不用重新加载,局部页面发生变化。
优点:
缺点:
参考:点击查看
单页面应用 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等来降低开发难度 | 较低,但页面重复的代码多。 |
维护成本 | 相对较低 | 相对较高 |
在Vue开发中,使用的就是SPA单页面开发的设计模式。
SPA的特点再次总结如下:
路由的特点:
value是 function 函数,用于处理客户端提交的请求
工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。
value是component,用于展示页面内容
工作过程:当浏览器的路径改变时,对应的组件就会显示。
vue-router
包含功能:
Vue2版本目前可以使用的最新路由插件是 vue-router@3,而Vue3则可以使用最新的vue-route@4
第一步,在Vue脚手架项目中安装vue-router@3插件
npm i vue-router@3
第二步,将路由组件放到单独的文件夹,比如pages文件夹
<template>
<div>
<h1