vue的：href和href

最新推荐文章于 2023-07-13 21:40:11 发布

原创最新推荐文章于 2023-07-13 21:40:11 发布 · 6.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了在Vue中正确使用路由与绑定的方法，强调了使用vue.js而非vue.min.js的重要性，以便于开发者能查看到详细的错误信息。文章详细解释了在不同场景下如何选择使用href或:href属性，以及它们在链接跳转和数据绑定中的作用。

不要使用vue.min.js，要用vue.js，可以显示报错信息。

代码段

<ol class="breadcrumb">
            <li><a href="shopkeeper_category_list">所有分类</a></li>
            <li><a :href="'shopkeeper_product_list?cid='+category.id">{{category.name}}</a></li>
            <li class="active">产品管理</li>
        </ol>

如跳转url为shopkeeper_category_list，该链接不需要动态获取data中的数据作为参数，则无需使用：href，使用href即可。

因为：href具有绑定意义，会即刻寻找名为“shopkeeper_category_list”的变量。

如跳转url为'shopkeeper_product_list?cid='+category.id，需要从变量中的category获取category.id，则需要绑定category.id。

<td>
                    <a href="#nowhere" @click="deleteBean(bean.id)">shopkeeper_category_list
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>
                </td>

另外，使用vue不要写：href=“#nowhere”。vue会自动识别名为nowhere的块，并进行绑定。而非预想的无超链接的作用……