什么是防止子路由导航的推荐方法？

beforeRouteLeave的好处在于，您可以避免在某些情况下导航。什么是防止子路由导航的推荐方法？

我有一个使用subroute来渲染页面的一部分设置。如果数据未保存，我希望子路由中的导航警卫来防止切换到另一个导航警卫。

{ 
    path: '/customers/view', 
    component: ViewCustomerShell, 
    children: [ 
     {path: ':id', name: 'ViewCustomer', component: ViewCustomer} 
    ] 
},

所以，当我访问/客户/视图/ 12和做出改变，如果他们试图加载/客户/视图/ 13，我想弹出平时确认，并可能停航。既然beforeRouteLeave在这种情况下没有被调用，那么防止导航的推荐方法是什么？看起来$路线似乎太晚了，因为那时导航已经发生了。

注：如上所述，beforeRouteLeave没有在这种情况下调用;它不起作用。

注意：使用“onbeforeunload”不起作用，因为它只触发整个页面更改时。

来源

2016-10-06 Nathan Wailes

你可以使用一个$route对象的组件内部看，如果它的变化，然后提高了确认模式......这将被调用时，您的路由变化！

const Baz = { 
    data() { 
    return { saved: false } 
    }, 
    template: ` 
    <div> 
     <p>baz ({{ saved ? 'saved' : 'not saved' }})<p> 
     <button @click="saved = true">save</button> 
    </div> 
    `, 

    watch: { 
    '$route': function() { 
     if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) { 
     // do something ... 
    } 
    } 
}

来源

2016-10-06 16:29:20

正如我在帖子中提到的，在这种情况下，路由离开之前不起作用。 –

抱歉没有看到。我会更新我的回答 –

正如我在文章中提到的，观看$ route会太晚，因为导航已经发生。 –

我也贴了同样的答案here。

Dynamic route matching专门设计用于使不同的路径或URL映射到相同的路由或组件。因此，改变参数在技术上不算是离开（或改变）路线，因此beforeRouteLeave没有被解雇。

但是，我建议可以使组件对应于负责检测参数变化的路由。基本上，每当参数发生变化时，记录变化然后将其反转（希望反转速度足够快以至于不被用户察觉），然后要求确认。如果用户确认更改，然后使用您的记录“改变”该更改，但如果用户未确认，则保持原样（不要反转）。

我没有亲自测试过，因此我不保证它能够正常工作，但希望它能清除任何有关应用程序哪部分负责检查更改的混淆。

来源

2017-01-03 11:59:48

什么是防止子路由导航的推荐方法？

回答

相关问题