Vue页面切换和a链接的本质区别详解

Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转，这和传统的<a href="path" rel="external nofollow" ></a>何其相似！但它们到底有什么具体的区别呢？

对比<a>，Link组件避免了不必要的重渲染

A -- 通过<a>标签实现页面跳转：（图中的例子将会在下面详细解答）

图一

图二

图三

B --通过<Link>组件实现页面跳转：

图一

图二

只更新变化的部分从而减少DOM性能消耗

Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，Vue-router很好地继承了这一点，譬如上图所示，导航组件和三个Tab组件（通过...,通过...,通过...）的重渲染是我们不希望看到的，因为无论跳转到页面一或是页面二，它只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望，反观<a>标签，每次跳转都重渲染了导航组件和Tab组件试想一下，在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！

以上这篇Vue页面切换和a链接的本质区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE单页面切换动画代码(全网最好的切换效果)

    我就废话不多说了,直接上代码吧! // 视图切换动画逻辑 let history = window.sessionStorage let historyCount = history.getItem('count') * 1 || 0 function routerTransition (to, from) { const toIndex = history.getItem(to.name) const fromIndex = history.getItem(from.name) let dir

  • vue实现选项卡及选项卡切换效果

    vue实现选项卡及选项卡切换效果

    这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c

  • Vue页面切换和a链接的本质区别详解

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转,这和传统的<a href="path" rel="external nofollow" ></a>何其相似!但它们到底有什么具体的区别呢? 对比<a>,Link组件

  • vue修饰符v-model及.sync原理及区别详解

    目录 v-model的原理 .sync的原理 v-model和.sync修饰符的区别 总结作用场景: v-model的原理 v-model的本质,其实就是:value和@input事件的语法糖 <!--v-model写法--> <my-component type="text" v-model="num"> <!--展开语法糖后的写法--> <my-component type="text" :value

  • Flutter 语法进阶抽象类和接口本质区别详解

    Flutter 语法进阶抽象类和接口本质区别详解

    目录 1. 接口存在的意义? 2. 继承 VS 实现 3. Dart 中接口与实现的特殊性 4.Dart 中抽象类作为接口的小细节 1. 接口存在的意义? 在 Dart 中 接口 定义并没有对应的关键字.可能有些人觉得 Dart 中弱化了 接口 的概念,其实不然.我们一般对接口的理解是:接口是更高级别的抽象,接口中的方法都是 抽象方法 ,没有方法体.通过接口的定义,我们可以通过定义接口来声明功能,通过实现接口来确保某类拥有这些功能. 不过你有没有仔细想过,为什么接口会存在,引入接口的概念是为了解

  • 在Vue页面中如何更优雅地引入图片详解

    在Vue页面中如何更优雅地引入图片详解

    目录 错误示范 通过computed 当图片不变的时候直接引入 通过css变量切换图片 通过css绘制 总结 在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢.这里我讲一下我常用的方法. 错误示范 也许你的代码里常常会这样写 <template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xx

  • Vue路由切换和Axios接口取消重复请求详解

    目录 前言 场景 解决方案 axios中如何取消请求 项目中封装使用 总结 参考 前言 在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决 场景 订单数据条件筛选查询 表单提交按钮频繁点击 路由页面切换请求未取消 解决方案 在每个请求发起的时候存储当前存储的标记在一个数组或Map中, 针对每个请求的时候在请求拦截中查询是否重复, 如果已重复则取消历史中重复的请求, 再发起当前请求, 如果没有重复, 则添加存储标记并正常请求, 已请求完成

  • vue页面切换到滚动页面显示顶部的实例

    在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生

  • Vue 页面切换效果之 BubbleTransition(推荐)

    CodePen 地址 前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤 点击菜单,生成 Bubble,开始执行入场动画 页面跳转 执行退场动画 函数式调用组件 我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用

  • vue页面切换过渡transition效果

    首先得有你想要的过渡效果css代码: .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

  • vue中keep-alive、activated的探讨和使用详解

    在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来. 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下. keep-alive <keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们.其是一个抽象的组件,自

随机推荐