vue给模态框弹窗添加路由，实现页面后退可以关闭模态框

Posted 2023-03-31

参考技术A 利用Vue Router中的 router-view 组件的 name 属性
再结合 RouteConfig 中的 compoents ，在页面中动态地配置当前页面路由的 components 值，然后再在页面进行跳转，具体例子如下：

小程序中自定义代用输入框的模态框弹窗

<HTML部分-->
<button type="default" bindtap=\'showModal2\'>弹出带文本框的modal</button>
<modal hidden="{{hiddenModal2}}" title="请完善您的个人信息" confirm-text="提交" cancel-text="取消" bindconfirm="model2confirm"
  bindcancel="model2cancel">
  <view class="loginBox">
    <view style=\'width:70%;margin-left:15%;\'>
      <view
        style=\'border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:38px;display:inline-block;background:#fff;\'>
        <view style=\'width:20%;display:inline-block;height:100%;\'>
          <image src=\'../../images/xueyuan.svg\' style=\'display:inline;\' mode="aspectFit" style=\'width:60rpx;display:inline-block;height:100%;\'></image>
        </view>
        <input style=\'width:80%;display:inline-block;height:100%;\' bindinput=\'input1\' placeholder-style=\'font-size:12px;\'
          placeholder=\'学 院：\'></input>
      </view>
      <view
        style=\'width:100%;height:38px;display:inline-block;background:#fff;margin-top:-5px;border-top:1px solid #f8f8f8;border-bottom-left-radius:8px;border-bottom-right-radius:8px;\'>
        <view style=\'width:20%;display:inline-block;height:100%;\'>
          <image src=\'../../images/code.svg\' style=\'display:inline\' mode="aspectFit" style=\'width:50rpx;display:inline-block;height:100%;\'></image>
        </view>
        <input style=\'width:80%;display:inline-block;height:100%;\' bindinput=\'input2\' placeholder-style=\'font-size:12px;\'
          placeholder=\'工 号：\'></input>
      </view>
    </view>
  </view>
</modal>

js部分：
Page({
  data: {
   hiddenModal2:true,
   input1:\'\',
   input2:\'\'
  },
  input1:function(e){
   this.setData({input1:e.detail.value})
  },
  input2:function(e){
    this.setData({input2:e.detail.value})
   },
  showModal2: function (e) {
   this.setData({ hiddenModal2: false })
  },
  model2confirm: function (e) {
   this.setData({ hiddenModal2: true })
   console.log(this.data.input1,this.data.input2)
  //  wx.showToast({
  //   title: \'确定\',
  //   icon:\'none\'
  //  })
  },
  model2cancel: function (e) {
   this.setData({ hiddenModal2: true })
  }
 })