Vue构建思路整理之三--通过router-view创建左右滑动内页

在一个修改地址页面,希望做出地址页从右侧滑入,添加完成之后从右侧滑出的效果。最终选择用router-view + vuex 来做。首先是父组件要通过vuex确定好默认的姓名电话和地址。

因为父组件不需要修改vuex值,所以只需要引入mapState进行赋值即可。这个地址添加组件,并没有一直被刷新的必要,所以可以<keep-alive>缓存下来。

然后是router的处理,需要在router中添加一个children

{
  path: '/mall',
  name: 'Mall',
  component: Mall,
  children: [
    {
      path: '/mall/agent',
      name: 'Agent',
      component: Agent
    }
  ]
},

然后是子组件。子组件可以用一个transition来达到这个效果

<transition  name="slideright"></transition>

然后在全局样式中,添加上右侧划入样式

.slideright-enter-active, .slideright-leave-active{
  transition: all 0.3s;
}
.slideright-enter, .slideright-leave-to{
  transform: translate3d(100%, 0, 0);
}
剩下的,就只做路由跳转就可以了。

这里还有一个值得注意的地方,当我们用多个页面进行联动的时候,如果想要父组件实时联动,比如说子组件弹出一个窗口,父组件对应的添加一个黑透,子组件切换,父组件黑头消失。在这种情况下,只用vuex会有问题。最开始我想的是,子组件打开事件,顺道把vuex修改了,点击关闭的时候在对vuex进行一次修改。但是如果用户用手机自带的后退按钮跳转路由的时候,就会发现,对vuex的修改事件没有被触发,这时有一个补充的方法,就是监听路由

watch: {
  '$route': 'fetchDate'
},
在当前这个页面内的每次路由跳转,都会被监听到,然后触发fetchDate事件。

随机浏览