路由嵌套
程序员文章站
2022-06-02 20:15:07
...
1.创建父路由
<router-link to='/account'>Account</router-link>
<router-view></router-view>
2.在父路由模板里加入子路由
<template id="tmp1">
<div>
<h1>这是 Account 父组件</h1>
<router-link to='/account/login'>登录</router-link>
<router-link to='/account/register'>注册</router-link>
<router-view></router-view> <!--再加一个容器来放子路由模板-->
</div>
</template>
3.在父路由的component属性后加children属性,是数组对象,对应子路由的path和component
注意:子路由的path前不加/
var routerobj = new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
//子路由的path前面不要带/
{path:'login',component:login},
{path:'register',component:register}
]
},
]
})
4.将路由规则对象注册到VM实例上
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routerobj, //注册路由规则对象
})
下一篇: 清除浮动