精华内容
下载资源
问答
  • vue的router-link和a标签的本质区别

    千次阅读 2020-05-25 09:08:34
    a标签和router-link a标签 <a href="">链接 </a> router-link <router-link to=""></router-link> a标签 点击a标签从当前页面跳转到另一个页面 通过a标签跳转,页面就会重新加载,相当于...

    a标签和router-link

    a标签

    <a href="">链接 </a>
    

    router-link

    <router-link to=""></router-link>
    

    a标签

    点击a标签从当前页面跳转到另一个页面
    通过a标签跳转,页面就会重新加载,相当于重新打开了一个网页

    router-link

    通过router-link进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染

    总结

    通过a标签和router-link对比,router-link避免了重复渲染,不像a标签一样需要重新渲染减少了DOM性能的损耗

    参考博客:
    https://blog.csdn.net/saber04/article/details/96717294

    展开全文
  • 问题现象 首页标题跳转,没有进入规定路由,而是被当做异常路由接收了 排查分析 在跳转前,明明已经添加...router-link>标签,首页这边用是<a>标签 猜测可能使用的标签有关 于是稍微修改下代码进行对

    问题现象

    首页的标题跳转,没有进入规定的路由,而是被当做异常路由接收了

    排查分析

    图片名称

    在跳转前,明明已经添加动态路由,并且通过console.log()也打印出了路由,说明动态路由是添加成功的

    导航Airticle模块也是动态添加路由,是能成功跳转的。证明添加路由的函数也是没问题的

    2000 thouthands later…

    唯一的区别,是导航Airticle那边用的是<router-link>标签,首页这边用的是<a>标签

    猜测可能和使用的标签有关

    于是稍微修改下代码进行对比测试实验

    <template>
    <div class='articlePreview'>
    // router-link 标签
    <router-link :to="{name:'detail'+homePrewlist.id, params:{id:homePrewlist.id}}"> {{homePrewlist.title}} </router-link>
    
    // a 标签
    <a :href="'/artical/detail/'+homePrewlist.id"><h1>{{ homePrewlist.title }}</h1></a>
    </div>
    </template>
    

    页面就变成了如下样子,分别点击两个标题,得到了不一样的结果
    图片名称

    答案已经很明显了,就是<router-link>标签和<a>标签的问题

    继续针对两个标签进行深究

    a标签

    <a href="">链接 </a>
    

    router-link

    <router-link to=""></router-link>
    

    a标签

    点击a标签从当前页面跳转到另一个页面
    通过a标签跳转,页面就会重新加载,相当于重新打开了一个网页

    router-link

    通过router-link进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染

    总结

    通过a标签和router-link对比,router-link避免了重复渲染,不像a标签一样需要重新渲染,导致一些动态添加路由的机制失效

    文章来自 Yongchin’blog yongchin.xyz

    展开全文
  • 在使用Vue-Cli写项目时候,在需要改变路由样式是,一般我们就是利用router-link的router-link-exact-...比如当我to到或重定向到某个路由时候,则router-link-exact-active类名会添加那个路由的a标签上。根据这个特性

    在使用Vue-Cli写项目的时候,在需要改变路由样式是,一般我们就是利用router-link的router-link-exact-active和router-link-active这两个类。那么这两个类有什么区别呢?

    1.router-link-exact-active

    router-link-exact-active类名是当前路由在哪,则这个类名添加到哪个路由的对应标签上。比如当我to到或重定向到某个路由的时候,则router-link-exact-active类名会添加那个路由的a标签上。根据这个特性我们就可以通过给router-link-exact-active类添加样式达到我们修改被定向到的路由样式的目的。

    2.router-link-active

    为了满足当点击父路由时,父路由和子路由都被更改样式的目的,router-link-active类就登场了。比如/songtao这是一个父路由path设置并给该路由redirect/songtao/ByteDance路径,当中有个子路由path设置为ByteDance,所以当我们点击跳转到/songtao时,会被重定向到/songtao/ByteDance路由。而router-link-active类名就会添加到父路由和子路由对应标签中。那么我们就可以通过给router-link-active类名样式达到同时更改父路由和当中子路由样式的目的。而router-link-exact-active类名只是被添加到了子路由上,因为我们redirect/songtao/ByteDance路径上了。router-link-exact-active类名只会添加到当前路径下的路由上。

    路径变化时,则相应类名添加或移除。

    展开全文
  • Vue创新之处在于,它利用虚拟DOM概念diff算法实现了对页面"按需更新";...a标签,每次跳转都得重渲染一次,在一个浩大项目里,“渲染"做了许多"无用功”,而且消耗了大量弥足珍贵DOM性能! ...
    1. Vue的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新";
    2. Vue-router很好地继承了这一点,只需要渲染一次就够了。
    3. a标签,每次跳转都得重渲染一次,在一个浩大的项目里,“渲染"做了许多"无用功”,而且消耗了大量弥足珍贵的DOM性能!
    展开全文
  • 1.在相关页面使用router-link (其中的to中的内容是指转向的页面) 2.在components文件下添加A.vue 和B.vue 文件(在其他文件下添加也可以,只要修改...使用路由和a标签的区别: 标签定义超链接,用于从一张页面链..
  • react-router的Link标签 a 标签有什么区别?? 从最终渲染Dom来看,两者都是链接,都是标签区别是: 是react-router里实现路由跳转链接,一般配合使用,react-router 接管了其默认链接跳转行为,区别...
  • 在使用react-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这传统的何其相似!但它们到底有什么具体的区别呢? 对比,Link组件避免了不必要的重渲染 A -- 通过标签实现页面跳转:(图中的...
  • 导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link> 2-3.展示区写Route标签进行路径匹配<Route path='/xxxx' component={Demo}/> 2-4.最外侧包裹了一个<BrowserRo.
  • 先看Link点击事件handleClick部分源码 if (_this.props.onClick) _this.props.onClick(event); if (!event.defaultPrevented && // onClick prevented default event.button === 0 && // ignore...
  • uni-app Vue 的区别

    千次阅读 多人点赞 2020-10-15 09:47:22
    a 改成 navigator router-link img 改成 image input 还在,但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picker iframe 改成 web-view ul...
  • 1.router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。 to:导航路径,要填写是你在router/index.js文件里配置path值,如果要导航到默认首页,只需要写成 to="/" 2.router-...
  • vue知识笔记

    2020-07-04 12:06:46
    1、router-link a 标签的区别a标签: 通过a标签进行跳转,页面会被重新渲染,违背了多视图单应用的概念 。 router-link组件:通过router-link进行跳转不会到新的页面、也不会重新渲染,它会选择路由所指向的...
  • 做项目时候发现传参数是通过 this.$route.query或者 this.$route.params 接收 router-link参数。 在网页中有两种跳转方式 方式1:使用 a 标签 跳转;(或者是 router-link ) 方式2:使用 window.location....
  • 2021-03-22

    2021-03-22 16:16:39
    router-link理解(与a标签区别) component标签的使用 路由切换方式有几种区别是什么 练习 基于上一个练习,继续完成用户登录、注册,登录成功之后进入到系统首页。系统完成左菜单右正文布局。 ...
  • vue 路由router

    2020-10-14 19:12:22
    1.router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。 to:导航路径,要填写是你在router/index.js文件里配置path值,如果要导航到默认首页,只需要写成 to="/" 2.router-...
  • router-link :to="…"> router.push(…) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 实例方法,通过编写代码来实现 注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以...
  • vue中页面跳转几种方法总结

    千次阅读 2020-04-30 10:44:45
    一、router-link标签跳转 ...但是a标签和router-link还有一点区别的a标签 W3C中解释:a标签定义超链接,用于从一个页面链接到另一个页面 个人理解:通过a标签进行跳转,页面会被重新渲染,即相当...
  • Vue-router是伴随着Vue框架出现路由系统,...对比,Link组件避免了不必要重渲染A -- 通过标签实现页面跳转:(图中例子将会在下面详细解答)图一图二图三B --通过组件实现页面跳转:图一图二只更新变化部分从...
  • 哈哈哈哈

    2020-10-14 19:06:01
    1.router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。 to:导航路径,要填写是你在router/index.js文件里配置path值,如果要导航到默认首页,只需要写成 to="/" 2.router-...
  • 你不知道面试题?

    2019-07-28 22:41:41
    1.hash路由history路由有什么区别?2.vue-router提供了哪些组件?3.a标签和router-link有什么区别?4.$route$router区...
  • vue路由

    2019-03-01 10:54:57
    一、App.vue中的&lt;router-view&gt;&lt;/router-view&...二、路由跳转和a标签的区别 a标签是用来跳其他链接或者锚点;页面跳转一般用this.$router.push/replace,或者使用router-link标签。 ...
  • 前端 VUE 面试题

    2021-01-28 22:32:36
    a标签和router-link的区别 路由守卫 指令 v-show v-if区别 v-model.lazy v-on:click v-on:click.stop element使用table 上家公司用过什么技术 vue技术栈 vuex 流程 state 属性 vue实例中如何调用...
  • 一、页面跳转方式 ...第一种是标签式跳转,通过router-link的形式进行跳转。第二种是编程式跳转,通过 this.$router.push的形式进行跳转。 this.$ route this.$ router 的区别: ~ this.$route 是路由参
  • 谈谈出入React框架踩过的坑  ...【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?  凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其s
  • 2.使用声明式导航router-link 跳转 3.使用编程式导航 router.push() <div @click=“Goto()”>跳转 友情提醒:this.routethis.routethis.routethis.router的区别 在Vue中this.route是路由[参数对象],...
  • 前端基础知识了解

    2019-10-04 05:29:16
    1、【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能? 2、缓存策略 3、震惊!喝个茶的时间就学会了vuex 4、半小时深刻理解React 5、2018移动端页面适配-自适应最新方案...
  • 标签和<a>标签有什么区别 <a>标签默认事件禁掉之后做了什么才实现了跳转 React层面性能优化 整个前端性能提升大致分几类 import { Button } from ‘antd’,打包时候只打包button, 分模块...

空空如也

空空如也

1 2
收藏数 33
精华内容 13
关键字:

router-link和a标签的区别