vue.js - vuejs单页面怎么返回前一页？

问题描述

问 题

vuejs这个页面输入input出现『取消』按钮，只要点击这个按钮即返回前一页，这个怎么实现？

<template>
  <div>
    <mt-search v-model="value" :result="filterResult" cancel-text="取消" placeholder="搜索">
    </mt-search>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      value: '',
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ]
    }
  },
  computed: {
    filterResult () {
      return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
    }
  }
}
</script>

<style lang="stylus">
  .mint-searchbar-cancel
    color: #757575

  .mint-searchbar-core
    padding-left: .6rem
</style>

解决方案

如果有用到 vue-router 做前端路由的话，可以使用 $router.go(-1)。

否则从数据驱动的角度考虑，设置一个数据，用该数据控制当前组件和上一组件的显示隐藏即可。

刚看了一下 mintui 的源码，取消对应的模板是：

<a
        class="mint-searchbar-cancel"
        @click="visible = false, currentValue = ''"
        v-show="visible"
        v-text="cancelText"></a>

好像没法添加事件。

这篇关于vue.js - vuejs单页面怎么返回前一页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！