Vue | Vue.js 全家桶 - Vue-Router详解(一)

简介: Vue | Vue.js 全家桶 - Vue-Router详解(一)

一、前端路由的发展历程

认识前端路由

路由-> 网络工程中的一个术语:


       在架构一个网络时 非常重要的两个设备就是 路由器和交换机


       事实上,路由器 主要维护的是一个映射表;


       映射表 会决定数据的流向


       路由的概念在软件工程中出现,最早是在后端路由中实现,原因是web的发展主要经历了这样一些阶段:


       后端路由阶段


       前后端分离阶段


       单页面富应用(SPA)

后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的.


       服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示


一个网站, 这么多页面服务器如何处理呢?


       一个页面有自己对应的网址, 也就是URL


       URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理;


       Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.


上面的这种操作, 就是后端路由


        当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端


       这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.


后端路由的缺点:


       一种情况是整个页面的模块由后端人员来编写和维护的


       另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码


       而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情;

前后端分离阶段

前端渲染的理解:


       每次请求涉及到的静态资源都会从静态资源服务器获取,这些资源包括HTML+CSS+JS,然后在前端对这些请求回来的资源进行渲染


       需要注意的是,客户端的每一次请求,都会从静态资源服务器请求文件


       同时可以看到,和之前的后端路由不同,这时后端只是负责提供API了


前后端分离阶段:


       随着Ajax的出现, 有了前后端分离的开发模式


       后端只提供API来返回数据,前端通过Ajax获取数据,并且通过JavaScript将数据渲染到页面中


       这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上


       并且当移动端出现后,后端不需要进行任何处理,依然使用之前的一套API即可


单页面富应用阶段:


       其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由


       也就是前端来维护一套路由规则.


       前端路由的核心是什么呢?  ==> 改变URL,但是页面不进行整体的刷新

URL的hash

前端路由是如何做到URL和内容进行映射呢?  ==> 监听URL的改变


       URL的hash p URL的hash也就是锚点(#), 本质上是改变window.location的href属性


       我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

6d0def5bf2c14d1589e86c1bcbf37a29.png   0f53ca7aa39f4926b9ae69e03ff18a25.png

       hash的优势就是兼容性更好,在老版IE中都可以运行.但是缺陷是有一个#.显得不像一个真实的路径

H5的History

history接口是H5新增的, 它有六种模式改变URL而不刷新页面:


       replaceState:替换原来的路径


       pushState:使用新的路径


       popState:路径的回退


       go:向前或向后改变路径


       forward:向前改变路径


       back:向后改变路径;

2a05777397fc49c388195563e187a50f.png   a56859cf25594ac091cd48766177e249.png

二、Vue-Router基本使用

认识Vue-router

目前前端流行的三大框架,都有自己的路由实现: 


      AngularngRouter


       ReactReactRouter


       Vuevue-router


Vue Router是Vue.js的官方路由:


       它与Vue.js核心深度集成,让用Vue.js构建 单页应用(SPA)变得非常容易


       目前Vue路由最新的版本是4.X版本


vue-router是基于路由和组件的


       路由用于设定访问路径,将路径和组件映射起来


       在vue-router的单页面应用中,页面的路径的改变就是组件的切换;


安装vue-router

JavaScript
npm i vue-router

路由的使用

使用vue-router步骤:


       第一步:创建路由需要映射的组件(打算显示的页面)


       第二步:通过createRouter创建路由对象,并传入routes和history模式


               配置路由映射:组件和路径映射关系的routes数组


               创建基于hash或者history的模式;


       第三步:使用app注册路由对象(use方法)


       第四步:使用路由 通过router-link 和router-view标签

9fbe4e81effe40ffaeb03dca8e05be47.png   8c0e192c3fee412eb8eb2593876b8a1f.png

路由的默认路径

默认情况下,进入网站首页,我们希望 渲染首页的内容


但是我们的实现中, 默认没有显示首页组件,必须让用户点击才可以.


如何可以让路径默认跳转到首页?并且router-view渲染首页组件?

JavaScript
routes:[
    // 默认从/路径 跳转到/home路径 使用redirect,重定向
    { path:"/",redirect:"/home" },
    { path:"/home",component:Home },
    { path:"/about",component:About },
]

我们在routes中配置一个映射:


       path配置的是根路径:/


       redirect是重定向,就是我们将根路径重定向到/home路径下,这样就可以得到我们想要的结果

history模式

另外一种选择的模式是history模式:

JavaScript
import { createRouter,createWebHistory } from 'vue-router'
const router = createRouter({
    // 指定采用的模式: hash模式 有#号
    // history:createWebHashHistory(),
    // 指定采用模式: history模式  没有#号
   history:createWebHistory(),
})

1f6a8f8892234c32b386d8df490667d8.png

router-link上有很多属性可以配置:


to属性: => 是一个字符串或者一个对象


replace属性: =>设置replace属性,点击时会调用router.replace(),而不是router.push()


active-class属性: =>设计激活a元素后应用的class,默认是router-link-active


exact-active-class属性:=>链接精准激活时,应用于渲染的class,默认是router-link-exact-active

三、路由懒加载分包处理

路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载:


       如果我们把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效 这样也可以提高首屏的渲染效率;


而Vue Router默认就支持动态来导入组件:


       这是因为component可以传入一个组件,也可以接收一个函数,该函数 需要放回一个Promise; 而import函数就是返回一个Promise

fd53a363455d476ba7936b431ee2d9a0.png

打包效果分析

       当当我们打完包之后,会发现 分包是没有一个很明确的名称的,其实webpack从3.x开始支持对分包进行命名(chunk name): 我们可以这样写

JavaScript
component: () => import(/* webpackChunkName: 'about' */'../Views/About')

路由的其他属性

name属性:路由记录独一无二的名称:


meta属性:自定义的数据

相关文章
|
1天前
|
JavaScript
Vue中动态Class实战
Vue中动态Class实战
7 0
|
1天前
|
前端开发 JavaScript
Vue+Swiper实现轮播图效果
Vue+Swiper实现轮播图效果
7 1
|
1天前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
10 0
|
1天前
|
JavaScript 前端开发
vue实现选中效果
vue实现选中效果
6 0
|
1天前
|
JavaScript
Vue中如何实现组件的动态注册?
Vue中如何实现组件的动态注册?
12 2
|
1天前
|
JavaScript 前端开发
Vue中的内置指令有哪些?
Vue中的内置指令有哪些?
10 2
|
1天前
|
缓存 JavaScript 开发者
Vue中的自定义指令有什么作用?
Vue中的自定义指令有什么作用?
10 0
|
1天前
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
10 2
|
1天前
|
开发框架 JavaScript 前端开发
vue首次加载白屏问题
vue首次加载白屏问题
9 0
|
1天前
|
JavaScript 前端开发 开发者
vue组件化开发,与渐进式框架讲解
vue组件化开发,与渐进式框架讲解
8 3

热门文章

最新文章

相关产品

  • 云迁移中心