Vue.js中关于分步操作vue-router的实现方式

Question

如上图所示，当我点击setup菜单后，应显示中间的Setup组件，中间的Setup组件有一个值是step=1，中间的Setup组件是一个操作步骤的组件，当Step为1时显示Setup1组件，当Step为2时显示Setup2组件，我现在的路由是这样配置的

routes: [
    {
        path: '/setup',
        component: Setup,
        children: [
            {path: '/setup/1', component: Setup1},
            {path: '/setup/2', component: Setup2}
        ]
    }
]

Setup组件我是这么写的

<template>
    <router-view></router-view>
</template>
<script>
export default {
    data () {
        return {
            step: 1
        }
    },
    created () {
        this.$router.push('/setup/' + this.step)
    }
}
</script>

这样写存在一个问题，当我第一次点击左边的setup菜单能正确跳转到/setup/1，点击完后，不点击其他跳转菜单，再次点击setup菜单时，此时URL就是/setup，而不是/setup/1，具体原因我知道，是因为组件没有被销毁，所以生命周期created方法不会去执行。但是针对这个需求我想不出一个好的解决方法了，希望大家能给我指点指点，如果这种实现方式不好还请各位指正。补充一点，左边的setup菜单我用的是element ui框架的<el-menu-item>来实现的。谢谢各位了！！！

Answer 1

试试 beforeRouteUpdate 钩子，另外，可以尝试路由 redirect，参见：http://router.vuejs.org/en/es...

Answer 2

不需要用created()，
在vuex设置一个全局的变量监听菜单栏的状态，存储起来，在router的钩子函数（就是切换路由的时候可以调用的事件），调用的时候将状态写成 this.$router.push('/setup/' + vuex的状态)，若不想在route钩子函数里操作，就应该在点击左边栏setup菜单的时候就将事件写好。
也可以在router-view里面传prop:step并且对step进行修改。在2.3.0又将1.0的.sync弄回来了。自己去参考一下这个修饰符即可。