怎么在Vue中利用路由监听实现同页面动态加载

怎么在Vue中利用路由监听实现同页面动态加载？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

watch: {    '$route.path': function (newVal, oldVal) {        // 参数 新旧路由path  type是全局定义的 三个类型菜单        this.type = newVal.substr(newVal.lastIndexOf("/") + 1);        this.search();    }},

然后这样可以切换路由的时候,重新拉取列表数据. 同时create方法里面也需要调用search.因为路由监听只作用于本页面.其它页面切换路由到这个菜单时不会触发.

created () {    let path = this.$route.path;    this.type = path.substr(path.lastIndexOf("/") + 1);    this.search();},

总结

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

watch:{      //监听路由变化    $route( to , from ){          console.log( to , from )        // to , from 分别表示从哪跳转到哪，都是一个对象        // to.path  ( 表示的是要跳转到的路由的地址  );     }}

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。