学vue笔记 router

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

下面就是我看了不知道的:

< div class= "footer_guide" >
< div class= "guide_item" :class="{ on: '/msite'=== $route. path}" @click=" goTo( '/msite')" >
< span class= "item_icon" >
</ span >
< span >主页 </ span >
</ div >
< div class= "guide_item" :class="{ on: '/search'=== $route. path}" @click=" goTo( '/search')" >
< span class= "item_icon" >
1
</ span >
< span >搜索 </ span >
</ div >
< div class= "guide_item" :class="{ on: '/order'=== $route. path}" @click=" goTo( '/order')" >
< span class= "item_icon" >
1
</ span >
< span >订单 </ span >
</ div >
< div class= "guide_item" :class="{ on: '/profile'=== $route. path}" @click=" goTo( '/profile')" >
< span class= "item_icon" >
1
</ span >
< span >个人中心 </ span >
</ div >
</ div >

每个tab绑定样式,然后点击哪一个tab他的路径等于$route.path 那么.on这个类别就被绑定上了。

goTo( path){
this. $router. replace( path)
}
然后给每个tab添加点击事件,点击路由到对应的页面。注意不是this.$router.push二是replace

猜你喜欢

转载自blog.csdn.net/axibadexiang/article/details/80835060