学了 vue 蛮久的, 也做过很多小项目, 今天看了一个视频关于路由的, 竟然发现自己不知道这个东西, 实在是有些惭愧! 觉得挺好用的就记下来了. 在做移动端的时候. 我们经常遇到这样的场景, 底部四个 tab, 点击哪个一个显示对应的路由页面.
下面就是我看了不知道的:
- <p class="footer_guide">
- <p class="guide_item" :class="{on:'/msite'===$route.path}" @click="goTo('/msite')">
- <span class="item_icon">
- </span>
- <span > 主页 </span>
- </p>
- <p class="guide_item" :class="{on:'/search'===$route.path}" @click="goTo('/search')">
- <span class="item_icon">
- 1
- </span>
- <span > 搜索 </span>
- </p>
- <p class="guide_item" :class="{on:'/order'===$route.path}" @click="goTo('/order')">
- <span class="item_icon">
- 1
- </span>
- <span > 订单 </span>
- </p>
- <p class="guide_item" :class="{on:'/profile'===$route.path}" @click="goTo('/profile')">
- <span class="item_icon">
- 1
- </span>
- <span > 个人中心 </span>
- </p>
- </p>
每个 tab 绑定样式, 然后点击哪一个 tab 他的路径等于 $route.path 那么. on 这个类别就被绑定上了.
- goTo(path){
- this.$router.replace(path)
- }
然后给每个 tab 添加点击事件, 点击路由到对应的页面. 注意不是 this.$router.push 二是 replace
来源: https://www.2cto.com/kf/201806/757436.html