[Bug Report] 关于tabbar组件，在跳转页面时的问题！

[CrazyMan]

VUX version

2.9.1

OS/Browsers version

chrome 66.0.3359.181

Vue version

2.5.2

Code

App.vue:
<template>
    <div id="app" style="height:100%;">
        <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" title="文件办理">
        </x-header>
        <view-box ref="viewBox" body-padding-top="46px">
            <!-- <router-view></router-view> -->
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </view-box>
    </div>
</template>
<script>
import { ViewBox, XHeader } from 'vux'
export default {
    name: 'app',
    components: {
        XHeader,
        ViewBox
    }
}
</script>
<style lang="less">
    @import '~vux/src/styles/reset.less';

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}
</style>
</style>

Index.vue:
<template>
    <div style="height:100%;">
        <router-view></router-view>
        <tabbar slot="bottom">
            <tabbar-item link="/index/undo" selected>
                <img slot="icon" src="../assets/icon_undo_normal.png">
                <img slot="icon-active" src="../assets/icon_undo_active.png">
                <span slot="label">待办</span>
            </tabbar-item>
            <tabbar-item link="/index/done">
                <img slot="icon" src="../assets/icon_done_normal.png">
                <img slot="icon-active" src="../assets/icon_done_active.png">
                <span slot="label">已办</span>
            </tabbar-item>
            <tabbar-item link="/index/mine">
                <img slot="icon" src="../assets/icon_mine_normal.png">
                <img slot="icon-active" src="../assets/icon_mine_active.png">
                <span slot="label">我的</span>
            </tabbar-item>
            <tabbar-item link="/index/start">
                <img slot="icon" src="../assets/icon_new_normal.png">
                <img slot="icon-active" src="../assets/icon_new_active.png">
                <span slot="label">发起</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>
<script>
import { Tabbar, TabbarItem, ViewBox, } from 'vux'
export default{
    components:{
        Tabbar,
        TabbarItem,
        ViewBox
    },
    data(){
        return{
            currentIndex:0
        }
    },
    methods:{
        tabChanged(index){
            this.currentIndex = index;
        }
    }
}

</script>

Steps to reproduce

待办页面在跳转时，增加了keep-alive,然后再点击底部tab的时候，出现选中项错乱。例如默认加载待办页面，当点击第二个tab时，应加载已办页面，但是页面时加载了，tab的选中项还在第一个tab上。测试后，发现把keep-alive去掉后，恢复正常。

What is Expected?

希望能将页面跳转和选中项对应起来。

What is actually happening?

实际上页面跳转了，tab状态没有改变。

[airyland]

tabbar 组件的 selected 属性是要自己控制的，也就是你要根据当前 route 来设定哪个为选中。组件不做对应是因为页面路由复杂，很多情况下 tabbar 是无法完全 match 当前路由的。

[CrazyMan]

感谢，我改了一种方式，不用router了。这个地方确实比较难控制。和keepalive有关系。

[xieyihao]

@CrazyMan 你好，请问页面切换了tabbar的选中状态没变 你是怎么处理的？

[redsanjin-1]

使用 tabbar 组件的 selected 能解决 keep-alive 选中项高亮 需点两次的问题 代码如下：

[Mr-FSM]

问题到最后怎么解决的呢

[minloveless]

[xuyichenklkkop]

link 页面是跳转了，但新组件不加载这是啥原因，谁来棒帮我。