使用vue怎么实现一个页面切换项目-创新互联

这篇文章主要介绍了使用vue怎么实现一个页面切换项目，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：

我们提供的服务有：成都网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、凤城ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的凤城网站制作公司

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

实现原理, vue的过渡 & 动画

技术栈: vue + vue-router

解决思路

区分前进 和 后退的路由

网上搜索的资料, 找到了两种

监听popstate事件

window.addEventListener('popstate', function (e) {
  // 用来判断是否是后退, 在判断后需要在其他地方重置
  router.isBack = true
},false)

在注册路由的时, 添加 meta对象 ( 路由元信息)中添加索引, 这样做就需要注意索引的大小(这里使用这一种方式)

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登录",
    keepAlive: false,
    index: 1
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前进",
    keepAlive: true,
    index: 2
   }
  },

根据切换方向设置不同的动画效果(通过给transtion内置组件不同的name选项)

方案

路由注册

 {
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登录",
    keepAlive: false, // 用来判断是否缓存, 当判断为缓存时, 则路由信息的name和组件的name选项需一致
    index: 1, // 通过比较不同的索引, 来判断是前进动画还是后退动画
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前进",
    keepAlive: true,
    index: 2
   }
  },

在App.vue(根组件)中, 判断动画方向

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 
 width: 100vw;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

到此这篇关于使用vue怎么实现一个页面切换项目的文章就介绍到这了,更多相关使用vue怎么实现一个页面切换项目的内容请搜索创新互联成都网站设计公司以前的文章或继续浏览下面的相关文章希望大家以后多多支持创新互联成都网站设计公司！

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

名称栏目：使用vue怎么实现一个页面切换项目-创新互联
标题来源：http://jkwzsj.com/article/disepo.html