zoukankan      html  css  js  c++  java
  • 踩坑,vue 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进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染

    总结

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

    文章来自 Yongchin'blog yongchin.xyz

  • 相关阅读:
    Codeforces 1265A Beautiful String
    1039 Course List for Student (25)
    1038 Recover the Smallest Number (30)
    1037 Magic Coupon (25)
    1024 Palindromic Number (25)
    1051 Pop Sequence (25)
    1019 General Palindromic Number (20)
    1031 Hello World for U (20)
    1012 The Best Rank (25)
    1011 World Cup Betting (20)
  • 原文地址:https://www.cnblogs.com/semishigure/p/14808861.html
Copyright © 2011-2022 走看看