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>