在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容。
第一步,首先新建一个vue+webpack+vuecli的demo,如下操作:
全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令:
第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作:
输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。
第三步,如下操作:
执行npm install需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c停止掉,然后再执行一次即可。
最后一步,操作如下:
在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。这个demo就创建好了。现在就在这个demo中添加一些内容,修改成如下:
{{ 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