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

问题描述

问 题

如上图所示，当我点击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>来实现的。谢谢各位了！！！

解决方案

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

这篇关于element-ui - Vue.js中关于分步操作vue-router的实现方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！