vue跳转页面

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="/">