1.父路由组件模板
const login ={
template:'<h1>登录组件</h1>'
};
const register ={
template:`
<div>
<h1>注册组件</h1>
<router-link to="/register/tab1">tab1组件</router-link>
<router-link to="/register/tab2">tab2组件</router-link>
<router-view></router-view>
</div>
`
};
2.子路由模板
const tab1 ={
template:'<h1>tab1组件</h1>'
};
const tab2 ={
template:'<h1>tab2组件</h1>'
};
3.定义路由实例
let router =new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path: '/register',
component: register,
children:[
{path:'/register',redirect: '/register/tab1'},
{path:'/register/tab1',component:tab1},
{path:'/register/tab2',component:tab2}
]
}
]
})
4.Vue实例中注册路由
let vm =new Vue({
el:"#app",
router:router
})