上一节:

  Vue Router 路由进阶

  • 路由的过渡动效

    <router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： 
    <transition>
   <router-view></router-view>
</transition>
    Transition 的所有功能 在这里同样适用
    上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。 
    const Foo = {
   template: `
      <transition name="slide">
         <div class="foo">...</div>
      </transition>
   `
}
   
const Bar = {
   template: `
      <transition name="fade">
         <div class="bar">...</div>
      </transition>
   `
}
    还可以基于当前路由与目标路由的变化关系，动态设置过渡效果： 
    //HTML code
<transition :name="transitionName">
   <router-view></router-view>
</transition> 


// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}
    查看完整例子请移步这里

  • 滚动行为

    使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
    注意: 这个功能只在支持 history.pushState 的浏览器中可用。
    当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： 
    const router = new VueRouter({
   routes: [...],
   scrollBehavior (to, from, savedPosition) {
      // return 期望滚动到哪个的位置
   }
})
    scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    这个方法返回滚动位置的对象信息，长这样：
    • { x: number, y: number }
    • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
    如果返回一个 falsy (译者注：falsy 不是 false，参考这里 )的值，或者是一个空对象，那么不会发生滚动。 
    scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
}
    对于所有路由导航，简单地让页面滚动到顶部。
    返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样： 
    scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
      return savedPosition
   } else {
      return { x: 0, y: 0 }
   }
}
    如果你要模拟“滚动到锚点”的行为： 
    scrollBehavior (to, from, savedPosition) {
   if (to.hash) {
      return {
         selector: to.hash
      }
   }
}
    你也可以返回一个 Promise 来得出预期的位置描述： 
    scrollBehavior (to, from, savedPosition) {
   return new Promise((resolve, reject) => {
      setTimeout(() => {
         resolve({ x: 0, y: 0 })
      }, 500)
   })
}

  • 路由懒加载

    当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
    结合 Vue 的异步组件 和 Webpack 的代码分割功能 ，轻松实现路由组件的懒加载。
    首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：
    const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
    第二，在 Webpack 中，我们可以使用动态 import 语法来定义代码分块点 (split point)：
    import('./Foo.vue') // 返回 Promise
    如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
    结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
    const Foo = () => import('./Foo.vue')
    在路由配置中什么都不需要改变，只需要像往常一样使用 Foo： 
    const router = new VueRouter({
   routes: [
      { path: '/foo', component: Foo }
   ]
})

    把组件按组分块

    有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk ，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。 
    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

  • 相关页面

上一节: