解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

前端之家收集整理的这篇文章主要介绍了解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容

第一步,首先新建一个vue+webpack+vuecli的demo,如下操作:

全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令:

第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作:

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。

第三步,如下操作:

执行npm install需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c停止掉,然后再执行一次即可。

最后一步,操作如下:

在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。这个demo就创建好了。现在就在这个demo中添加一些内容修改成如下:

修改HelloWorld.vue的内容为如下:

{{ msg }}

Essential Links

内容按钮1 内容按钮2

路由router下的index.html的修改为如下:

现在创建一个conDetail.vue了,如下:

内容
{{item.con}}

结果就是,当点击内容按钮1,出现了对象的内容,点击内容按钮2,出现相应的内容。当然我这儿写的是点击按钮2的时候,其items的内容为空数组。这儿也使用了$route的监听。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

或者使用 2.2 中引入的 beforeRouteUpdate 守卫:

总结

以上所述是小编给大家介绍的解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/34973.html

猜你在找的Vue相关文章