学了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)
}