在VueRouter的实例中的routes里的对象中,除了path,component还有一个children属性,可以在其中来设置子路由的指向与跳转等
注意:因为已经是在其中指明,所以子路由中的path不需要加前缀 '/'
<template id="home"> 创建组件
<div>
<h1>我是主页</h1>
<router-link to="/home/login">登陆</router-link>
<router-link to="/home/reg">注册</router-link>
<router-view></router-view>
</div>
</template>
<div id="app">
<router-link to="/home">主页</router-link> 跳转/home地址
<router-view></router-view>
</div>
<script>
var login={ 创建组件对象
template:'<p>我是登陆</p>'
}
var reg={
template: '<p>我是注册</p>'
}
var home={ 创建组件对象赋指引到#home
template:'#home'
}
var rtobj=new VueRouter({
routes:[
{
path:'/home',
component:home,
children:[
{path:'login',component: login},
{path:'reg',component:reg}
]},
],
})
var vm=new Vue({
el:'#app',
router:rtobj,
})
</script>