zoukankan      html  css  js  c++  java
  • vue使用 router-link 时点击不能跳转问题

    本来一直都是使用<router-link to='/CouplePackage'>产品</router-link>这样的静态方法,

    但是突然今天发现这个方法好像有点问题,在某些地方加了<router-link to='/CouplePackage'>产品</router-link>点击竟然没有反应了,

    于是一直找问题,结果发现网上说可以用这样的方法来解决:

    <router-link :to="{ name: 'CouplePackage' }" >产品</router-link>的方法来解决,结果由于我用错了,没有效果。

    后来问了朋友之后,朋友给了找出了问题:

    在我加了<router-link to='/CouplePackage'>产品</router-link>标签之后,它里面的div的父级就变成了<router-link>标签了,因为我在div里面设置了浮动,

    所以如果不给</router-link>清除浮动默认就是没有高度的,自然点击就没有效果了(也许就是根本没有点击到了,因为没有高度)。给<router-link>清除了浮动之后,立马效果就有了。

    其实在解决这个问题之前我还发现了一个可以不清楚浮动也能有效果的办法:

    <router-link :to="{path: '/CouplePackage' }">产品</router-link> 这样是动态传的路径,就是不清除浮动也还是可以正常点击的。(虽然它可以正常用,但是这样绝对不是一个号习惯,清除浮动还是要加的)

    最后,朋友给了我几个方法:

      to="home" 第一种就是我之前常用的静态方法 如:<router-link to='/CouplePackage'>产品</router-link>


      :to="'index'" 第二种方法其实就是通过data{return {index: 'huahuah'}}这样的方式来返回要跳转的路径

      :to="{ path: '/home' }" 第三种方法就是上面介绍的方法了,<router-link :to="{path: '/CouplePackage' }">产品</router-link> 


      
    :to="{ name: 'User'}" 第四种方法其实和第三种方法差不多,只不过一个是路径,一个是名字,如:<router-link :to="{ name: 'CouplePackage' }" >产品</router-link>

    在使用中发现其实使用第三种和第四种方法的可扩展性更好,并且更加不容易出错。

  • 相关阅读:
    ajax如何调用本页数据源不用一般处理程序
    管理员IP匹配方法
    Silverlight DataGrid赋数据源自动生成列表
    Winform WebBrowser加上进度条
    asp.net的几个帮助类
    asp.net App.config配置文件帮助类
    查找集合中某个元素的位置和某个元素的集合
    sqlServer通用分页
    定时执行某个方法
    关于IE6.7.8.FF兼容的问题
  • 原文地址:https://www.cnblogs.com/hermit-gyqy/p/11224638.html
Copyright © 2011-2022 走看看