Vue使用 router-link 链外部网址时出现的问题

文章目录

1. 1. 解决办法： 将 router-link 标签替换成 a 标签

以豆瓣API为例，情况是这样的，在router-link的to属性中链接豆瓣网址，点击之后，会在地址栏中本地之后拼接豆瓣网址，导致无法访问

<ul>
    <li v-for="item in theaters" :key="item.id">
        <div>{{item.title}}</div>
        <router-link :to="item.alt">
            <img :src="item.images.small" alt="">
        </router-link>
    </li>
</ul>

<!-- 地址栏显示： http://localhost:6060/#/https://movie.douban.com/subject/20495023/ -->

解决办法： 将 router-link 标签替换成 a 标签

<ul>
    <li v-for="item in theaters" :key="item.id">
        <div>{{item.title}}</div>
        <a :href="item.alt">
            <img :src="item.images.small" alt="">
        </a>
    </li>
</ul>

<!-- 地址栏显示： https://movie.douban.com/subject/20495023/ -->

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。