下午好 在本文中，我将分析一种方法，该方法可让您在更改地址时显示模态窗口以满足我们的需求。 我知道
官方网站上的模态组件有专有的解决方案。 除此之外，还有许多其他有关Habré的文章，专门讨论VueJ中的模式窗口（例如
this ）。
但是，我认为它们每个都有其缺点，例如：
- 对于场外描述的组件，您需要创建一个单独的变量并将其绑定；
- 第二篇文章讨论了第三方解决方案。 在这种情况下，您需要花费时间并弄清楚如何使用这些组件以及我认为额外的项目依赖项。 我的立场是：越简单越好。
再说一次，我什么都不知道，因此，如果您有话要说或要注意，那么我很乐意接受建设性的批评。 此外，我们将仅使用我们使用的工具（Vue，VueRouter，Bootstrap Modal）的标准功能。 因此，更接近要点...
会有人说：“最好将npm依赖关系连接到模式，而不是拉动整个bootstrap + jquery。” 同志们，没有人会阻止您根据自己的需要和工具来调整整个过程。 以上工具只是实现的示例。
立即工作的选择 。
的HTML<div id="app"> <nav> <router-link :to="{ name: 'modal' }" exact>Open Modal</router-link> </nav> <router-view></router-view> </div>
javascript Vue.use(VueRouter) const Modal = { template: `<div class="modal fade" tabindex="-1" role="dialog" ref="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> mounted: function(){ console.log('mounted') var context = this; $(this.$refs.modal).modal('show') $(this.$refs.modal).on('hidden.bs.modal', function(){ context.$router.go(-1); }) } } const routes = [ { path: '/modal', name: 'modal', component: Modal }, ] const router = new VueRouter({ routes, }) // New VueJS instance var app = new Vue({ // CSS selector of the root DOM element el: '#app', // Inject the router into the app router, })
实际上，没有什么复杂的。
- 当单击我们的链接时，将安装我们的Modal组件。
- 当安装它时，我们打开模态窗口并通过它。$ Refs跟踪它的关闭。
- 当它关闭时，我们以编程方式使此人退后一步，以便卸载我们的组件。
因此，如果您计划使用自己的独立逻辑设计许多模态窗口，则采用这种方法和结构是一个很好的解决方案：
- 易于定制；
- 无需加载第三方依赖项。 就我个人而言，越简单越好；