核心提示:学了vue蛮久的,也做过很多小项目,今天看了一个视频关于路由的,竟然发现自己不知道这个东西,实在是有些惭愧!觉得挺好用的就记下来了。在做移动端的时候。我们经常遇到这样的场景,底部四个tab,点击哪个一...
学了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