这两天总结了关于vue-router优化的几点技法,做个笔记

在基于vue的移动端app中,通过vue-router可以便捷的进入某一路由或回退到上一路由,但是若不对vue-router做相关优化处理,则会造成以下几个问题:

1.切换路由时,频繁向后台发送请求

2.切换路由时,页面会卡顿,影响用户体验

基于这些困扰,我们从头开始探究vue-router

问题1:切换路由时,频繁向后台发送请求,以及解决办法

在常规的路由配置下,我们使用App.vue作为app根组件:

app.vue有一个router-view标签用于显示内部组件,

而在router/index.js中,path为'/'的根路由映射了home,这代表home组件作为App.vue的子组件

因而,App.vue下的router-view代表了身为子组件的home.vue,而home组件作为App.vue的子组件(路由),本身又是除app.vue以外所有后代路由的根路由。

它们一起构成了整个APP路由系统。这是vue-router的常规描述。

萌新们往往会将所有的路由一股脑的与根路由配置在同一级,但事实证明,这是不可取的。

假设我们F12键,打开netWork -> XHR 时就会发现,

在home路由下,进入某个路由,然后回退到上个路由时,我们请求了2次数据,即点击了要进入的路由时,请求了一次;回退到上个路由时,又请求了一次

而这与我们的期待是不一样的:每当我们点击一个新路由时,vue才向后台发送网络请求,而我们回退到某个路由时(比如本例,我们回退到home路由上),

则回退到的路由在没有刷新事件前不要请求数据。

所以原因就在于此:

与根路由同级时,每次进入或回退某个路由,上一个已请求到的路由资源都被销毁了,因而每当进入一个路由地址(无论是回退上一路由还是进入某一新路由),

app.vue都会重新加载一次router-view,vue都会向服务器发起一次网络请求,造成服务器实则没必要的花销。

并且随着用户不断进入或者回退某个路由,耗费的花销会越来越可观

那么,保持组件的状态,便是解决的方法:

  • 解决方法一:使用vue内置组件keep-alive保持组件状态

    使用keep-alive标签包裹app.vue里router-view标签,这样就相当于包裹了包括home在内的所有路由组件:

<template>
//App.vue
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>

当我们打开f12再次尝试进入或者回退到某个标签时,发现只有在进入一个新路由地址时,才会发起请求, keep-alive可以缓存router-view的内容,

这样似乎已经达到了我们的期望,

但正是keep-alive的缓存特性有一个致命的缺陷———— keep-alive也会缓存动态路由的状态

尝试举个例子来解释这句话:

假设用户进入了一个商品界面,但用户对这个商品并不满意,当用户回退到上一级而进入了一个中意的商品界面却发现,

跟刚刚那个界面一样,且无论进入哪个商品界面都跟第一个商品界面一样时,

这便会是keep-alive的弊端----keep-alive标签会缓存动态路由的状态,因而不会再进行数据请求,

这对动态路由来说是致命的

所以,这个方法是不可取的

  • 解决办法二:更改router的配置

将home下所有子路由放置在home路由的children路由里,将子路由的子路由放置在子路由的children里,以此类推,即:

//router/index.js
{
path: '/',
name: 'Home',
component: Home,
// 根目录的子路由,优化路由,防止每次回退或进入都会加载
//home路由的子路由放置在自身的children路由下
children: [
{
path : '/playListView',
name:'PlayListView',
component:() => import(/* webpackChunkName: "about" */ '../views/playListView.vue'),
children:[
//子路由的子路由放置在自己的children下,以此类推
{
path : ':id',//传入id值,指明是哪一个playlist
name:'PlayListViewInfo',
component:() => import('../views/playListInfo.vue')
}
]
}
]
}

如果某一后代路由是动态路由,直接给该后代路由加动态路由参数,不加父路由的path

如果使用了该方法,则还需要给home下每一个后代路由添加router-view标签,用以标识该路由是home根路由的后代路由

举个栗子:

<template>
<!-- 歌单视图 歌单详情页-->
<div class="page">
<div>
<m-header>
全部歌单
</m-header>
<div class="play-wrapper">
<play-list :data="playListData" @clickItem = 'gotoPlayListInfo '></play-list>
</div>
</div>
<router-view/> <!-- 该路由组件上的router-view标签标识它的子路由-->
</div>
</template>

ps: 如果点击路由后有报错: Navigating to current location ("/router") is not allowed ,请点击这里

这样设置后,会出现点击无法进入路由的结果。

但是如果打开f12会看到DOM中存在有该后代路由的dom,且点击后,地址栏上已经显示了子组件的路由,但用户界面上依然只显示了home组件,

也就是说当点击了子路由以后,子路由显示了,但父路由依旧存在于当前界面,阻碍了用户的视图

这与我们期待的有所不同: 点击某个子路由,然后给用户展现该路由的内容,但其实已经接近明朗————仅仅是页面上有了父路由界面与子路由界面并存的现象

解决办法:(提高后代组件的层级,使后代组件可以覆盖父组件) 在home的所有后代路由的根div上添加一个叫page的class:

/* app的公共样式common.js */
.page{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:#f3f4f9 ; /*与html背景色保持一致*/
z-index: 9999; /*使用最高层级,覆盖home组件的层级*/
overflow: scroll;/*在移动端中使滚动可用*/
}

而以上操作完成后,就可以发现,点击进入路由时,会发送一个网络请求,而回退到上一路由时,则不会发起请求,且页面正常显示;且就算进入了一个动态路由也可以正常显示

这样,就解决了切换路由时,频繁向后台发送请求的问题。

问题2: 进入某一路由或回退到上一路由时,页面会有生硬的进入显示现象,影响用户体验

原因: 路由间的切换没有添加过渡效果

基于问题一,我们可以使用vue的transition标签包裹组件的router-view标签,使用transition的name属性来定制过渡样式

举个栗子:

<template>
<div class="page">
<div>
<m-header >全部歌手</m-header>
<artist-list :data="artistsData"
@clickItem="gotoArtistsInfo"
class="artist"></artist-list>
</div>
<transition name="slide"><!--

关于对vue-router的优化(详尽版)的更多相关文章

  1. Vue项目SEO优化的另一种姿态

    背景:当前项目首页和登陆后的平台在一个项目里,路由采用hash模式,现在要做SEO优化,这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大,影响范围比较广,同样更改当 ...

  2. Vue项目性能优化整理

    以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然 ...

  3. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  4. Vue Router 使用方法

    安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...

  5. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  6. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. 电脑公司最新GHOST WIN7系统32,64位优化精简版下载

    系统来自系统妈:http://www.xitongma.com 电脑公司最新GHOST win7系统32位优化精简版V2016年3月 系统概述 电脑公司ghost win7 x86(32位)万能装机版 ...

  9. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 近期 github 机器学习热门项目top5

    磐创智能-专注机器学习深度学习的教程网站 http://panchuang.net/ 磐创AI-智能客服,聊天机器人,推荐系统 http://panchuangai.com/ [导读]:Github是 ...

  2. HOOK相关原理与例子

    消息HOOK 原理: 1. 用户输入消息,消息被放到系统消息队列. 2. 程序发生了某些需要获取输入的事件,就从系统消息队列拿出消息放到程序消息队列中. 3. 应用程序检测到有新的消息进入到程序消息队 ...

  3. SpringCloud-Nacos/OpenFien/Gateway的基本介绍及快速上手

    一.Spring-Cloud-Alibaba-Nacos 注册中心 1.下载.安装 Nacos 下载地址:https://github.com/alibaba/nacos/releases 下载后解压 ...

  4. CISP-PTE学习记录-大纲(1)

    大纲内容记录 Linux操作系统安全 Windows操作系统安全 数据库安全 Web安全基础 HHTP协议 注入漏洞 XSS漏洞 请求伪造 文件处理漏洞 访问控制漏洞 会话管理漏洞 实战练习 中间件 ...

  5. G1垃圾回收器

    垃圾回收器的发展历程 背景 01.G1解决的问题 G1垃圾回收器是04年正式提出,12开始正式支持,在17年作为JDK9默认的垃圾处理器. 在04年的时候,java程序堆的内存越来越大,从而导致程序中 ...

  6. vscode 保存自动 格式化eslint 代码

    在网上找了很多种方法,大多都没有成功  一下是一种成功的 配置方法: 1) First, you need to install the ESLint extension in the VS code ...

  7. 1020 Tree Traversals (25 分)

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  8. Java进行二元操作类型转换

    当对两个数值进行二元操作时,先要将两个操作数转换为同一种类型,然后再进行计算. 如果两个操作数中有一个是double类型,另一个操作数就会转换为double类型. 否则,如果其中一个操作数是float ...

  9. Mysql索引、explain执行计划

    1.索引的使用场景 哪些情况使用索引: 1.主键自动建立唯一索引 2.频繁作为查询条件的字段应该创建索引 where 3.多表关联查询中,关联字段应该创建索引on两边都要创建索引 select * f ...

  10. Java中的数据结构-HashMap

    Java数据结构-HashMap 目录 Java数据结构-HashMap 1. HashMap 1.1 HashMap介绍 1.1.1 HashMap介绍 1.1.2 HashMap继承图 1.2 H ...