vue路由嵌套

2019年8月25日

路由的嵌套主要是用的是routes的children属性

var router=new VueRouter({
            routes:[
                {path:'/account',
                component:account,
                children:[
                {path:'login',component:login},
                {path:'register',component:register}
                ]}
            ]
        })

使用children属性实现子路由，同时 子路由的path前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

组件的模板对象

		var account={
            template:'#tmp1'
        }
        var login={
            template:'<h3>登陆</h3>'
        }
        var register={
            template:'<h3>注册</h3>'
        }

页面中的子路由必须放置到父路由中去，这样才能完成嵌套

<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>