zoukankan      html  css  js  c++  java
  • vue路由动态过渡效果

    不多说,直接上代码

    import Vue from 'vue' //引入vue
    import VueRouter from 'vue-router'  //引入路由
    
    Vue.use(VueRouter)   //使用路由
    //定义Home组件
    const Home = {    
      template: `
        <div class="home">
          <h2>Home</h2>
          <p>hello</p>
        </div>
      `
    }
    
    const Parent = {
      data () {
        return {
          transitionName: 'slide-left'
        }
      },
      // 基于路由变化动态设置转换
      watch: {
        '$route' (to, from) {
          const toDepth = to.path.split('/').length
          const fromDepth = from.path.split('/').length
          this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        }
      },
      template: `
        <div class="parent">
          <h2>Parent</h2>
          <transition :name="transitionName">
            <router-view class="child-view"></router-view>
          </transition>
        </div>
      `
    }
    
    const Default = { template: '<div class="default">default</div>' }
    const Foo = { template: '<div class="foo">foo</div>' }
    const Bar = { template: '<div class="bar">bar</div>' }
    //定义路由路径
    const router = new VueRouter({
      mode: 'history',//历史模式
      base: __dirname,
      routes: [
        { path: '/', component: Home },
        { path: '/parent', component: Parent,
          children: [
            { path: '', component: Default },
            { path: 'foo', component: Foo },
            { path: 'bar', component: Bar }
          ]
        }
      ]
    })
    
    new Vue({
      router,
      template: `
        <div id="app">
          <h1>Transitions</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/parent">/parent</router-link></li>
            <li><router-link to="/parent/foo">/parent/foo</router-link></li>
            <li><router-link to="/parent/bar">/parent/bar</router-link></li>
          </ul>
          <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
          </transition>
        </div>
      `
    }).$mount('#app')
  • 相关阅读:
    观察者模式(Observer)
    外观模式(三层解耦)
    建造者模式(Builder)
    简单工厂
    单例模式(Winform窗体的实现)
    20180213 字符串spilt方法,字符串打包zip方法
    20180212第一发:Python与Json编码解码举例
    Eclipse插件Fat Jar
    java学习之浅谈多线程4SwingWorker
    Android SDK manager 闪退
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/7738013.html
Copyright © 2011-2022 走看看