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 两个静态页面之间的跳转,效果图如下:

Vue学习笔记(五)Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署_第1张图片
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 路由的理解

路由的特点:

  1. 一个路由就是一组映射关系(key - value)
  2. 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

你可能感兴趣的:(学习笔记,vue.js,学习,bootstrap)