美文网首页
vue跳转页面

vue跳转页面

作者: edisonTechBlog | 来源:发表于2020-03-01 19:16 被阅读0次

vue有两种方法跳转页面

使用router-link

            <router-link to="/detail">
                <li class="item" v-for="item of recommendList" :key="item.id">
                    <img :src="item.imgUrl">
                    <div class="info">
                        <p class="info-title">{{item.title}}</p>
                        <p class="info-desc">{{item.desc}}</p>
                        <button class="btn">查看详情</button>
                    </div>
                </li>
            </router-link>

使用$router.push 。在需要被触发跳转的元素上绑定跳转事件

//跳转到首页
this.$router.push("/")

还有一点需要注意,假设我们要将li标签设置为router-link。此时router-link会将li标签渲染为a标签,显然这不是我们想要的。那么可以这样做。

//tag的意思是告诉router-link不要将此标签渲染为a,而是渲染为li
<router-link tag="li" to="/">

相关文章

网友评论

      本文标题:vue跳转页面

      本文链接:https://www.haomeiwen.com/subject/pwnhkhtx.html