vue路由组件左右切换（兼听手机返回键或自写按钮）-创新互联

示例 http://47.94.90.89/dist

成都创新互联是一家集网站建设,如皋企业网站建设,如皋品牌网站建设,网站定制,如皋网站建设报价,网络营销,网络优化,如皋网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

1 安装vue-cli

（1）下载安装node.js

（1） npm install -g cnpm --registry=https://registry.npm.taobao.org 换源

（1） cnpm install -g vue-cli 全局安装vue-cli 已安装则不用

（1） vue init webpack Vue-Project 初始化vue项目使用webpack模板，项目名称（自带webpack）

（1） cnpm install 初始化生成node_modules

（1） npm run dev
需要上线打包为 npm run build
2 配置路由（router 目录>index.js）

import ccc from '@/components/ccc'

Router.prototype.go = function (a) {
   sessionStorage.isBack = true
  if(a){
   window.history.go(a)
  }else{
   window.history.go(-1)
  }
}
window.addEventListener("popstate", function(e) {
  sessionStorage.isBack = true
}, false);

Vue.use(Router)
3 app.vue中
（1）```
<transition :name="transitionName" >
<router-view class="child-view" ></router-view>
</transition>
</div>

（2）<script>
export default {
  name: 'App',
  data () {
    return {
      transitionName:'slide-left'
    }
  },
 watch: {
    '$route' (to, from) {

      let isBack = eval(sessionStorage.isBack)
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = '  slide-left'
      }

      console.log(sessionStorage.isBack);
      sessionStorage.isBack = false
    }
  },

}
</script>

<style>
  *{
    margin: 0 ;
    padding: 0;
  }
  body,html{
   width: 100%;
    height: 100%;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
 width: 100%;
  height: 100%;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
}
  .child-view {
    transition:all .3s ease;
    position: absolute;
   width: 100%;

  }
  .slide-left-enter,.slide-right-leave-active {
    opacity:0;

    -webkit-transform:translate(100%,0);

    transform:translate(100%,0);

  }

  .slide-left-leave-active,.slide-right-enter {

    opacity:0;

    -webkit-transform:translate(-100%,0);

    transform:translate(-100%,0);

  }

</style>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：vue路由组件左右切换（兼听手机返回键或自写按钮）-创新互联
转载来于：https://www.cdcxhl.com/article36/dcjhpg.html

成都网站建设公司_创新互联，为您提供营销型网站建设、网站改版、定制开发、App开发、微信公众号、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容