vue动态加载组件,动态加载路由,Vue当前页面怎么监听路由

　　本文主要介绍了Vue基于路由监控实现同页面动态加载的一个实例。关键是在切换路由时检索列表数据。我们来看看实现方法。

目录

　　场景分析

　　剥削

　　摘要

场景分析

　　在该系统中，一个模块有三个子模块。在业务数据中，根据类型可以直接区分这三个子模块的归属。通常，我们在同一个模块中编写，然后选择业务类型。但是，在主人的要求下，这分为三个菜单。用户可以根据自己的需求选择需要使用的模块。

　　这三个菜单使用相同的数据表。所以我们必须只写一个列表，添加和编辑页面。然后我们就可以根据进入页面的路线判断自己属于哪个类别，跳转到添加、编辑、调用指定类别对应的列表界面页面。

开发

　　因为三个模块使用同一个页面，所以需要配置三个路由，做页面区分。现在的问题是，虽然三个菜单的路线不同，但是页面是同一个页面。切换菜单时，触发vue的挂钩功能不会再被触发。那么，三个列表页面查询的数据是相同的，即不会触发查询方式，导致无法切换条件。

　　然后我在网上搜了一下手表的监控时间。当我发现可以通过监控实现路线变更时，我触发了列表数据加载方法。具体代码如下

　　页面的路径在列表后添加1、2和3，以区分是哪个页面。

　　观察：{

　　$route.path: function (newVal，oldVal) {

　　//参数新老路由路径类型是全局定义的三种类型的菜单。

　　this . type=newval . substr(newval . lastindexof(/)1)；

　　this . search()；

　　}

　　},

　　然后，当您切换路由时，您可以再次提取列表数据。同时，还需要在create方法中调用search。因为路由监控仅在此页面上起作用，所以当其他页面将路由切换到此菜单时不会被触发。

　　已创建(){

　　设path=this。$ route.path

　　this . type=path . substr(path . lastindexof(/)1)；

　　this . search()；

　　},

总结

　　在实际开发中，可以根据自己的需求选择监控属性。

　　观察：{

　　//侦听路由更改

　　$路线(至，自){

　　console.log(收件人、发件人)

　　//to、from分别表示从哪里跳转，都是一个对象。

　　//to.path(表示要跳转到的路由的地址)；

　　}

　　}

　　这就是Vue路由监控实现同页动态加载的例子的细节。更多关于Vue路由监控实现同页动态加载的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。