SOURCE

console 命令行工具 X clear

                    
>
console
var User = {
  propTypes: {
    userId: {
      type: 'string'
    }
  },
  // <router-view /> 用于指定 children 中的路由组件的渲染出口
  template: `
    <div>
      user id: {{userId}}
      <router-view />
    </div>
  `
}
var UserProfile = {
  propTypes: {
    userId: {
      type: 'string'
    }
  },
  template: `
    <div>
      user profile: {{userId}}
    </div>
  `
}
var UserPosts = {
  propTypes: {
    userId: {
      type: 'string'
    }
  },
  template: `
    <div>
      user posts: {{userId}}
    </div>
  `
}

YoxRouter.install(Yox);

var rouuter = new YoxRouter.Router({
    el: '#app',
  routes: [
    {
      path: '/user/:userId',
      component: User,
      children: [
        {
          // 当 /user/:userId/profile 匹配成功
          // profile 会被渲染在 User 的 <router-view /> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:userId/posts 匹配成功
          // posts 会被渲染在 User 的 <router-view /> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ],
  route404: {
    path: '/404',
    component: {
      template: '<div>not found</div>'
    }
  }
});

rouuter.start();
<div id="app"></div>

<link rel="stylesheet" href="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.css">
<script src="//unpkg.com/yox@1.0.0-alpha.121/dist/standard/dev/yox.js"></script>
<script src="//unpkg.com/yox-router@1.0.0-alpha.53/dist/yox-router.js"></script>
<script src="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.js"></script>

<script src="//unpkg.com/lodash@4.17.15/lodash.js"></script>