视图 / 命名视图 / 视图过渡

• 其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件。也可以初始化路由时为每个匹配传入props参数来实现传参到组件中

<router-view :hasSide='true'></router-view>

name 命名视图

• 命名视图：同时 (同级) 展示多个视图。如果 router-view 没有设置名字，那么默认为 default。命名视图没有对应命名组件时不会被渲染

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

过渡

• 过渡动效

<!-- 使用动态的 transition name -->
<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'
  }
}