如上图所示,点击【免费注册】按钮,进入到注册页面,我在注册页面区分个人账户和企业账户,点击对应的标题显示对应的子组件,但是发现刚进入页面的时候,是图2那样子,并没有默认选中显示的子组件。原来是因为定义注册页的路由时缺少重定向redirect指向默认的子组件。
【免费注册】按钮定义的路由:
<router-link to="/register" class="login-other-register">免费注册</router-link>
router的index.js文件里面(就是因为缺少redirect: '/register/register-oneself',所以页面没有指向默认的子组件):
{
path: '/register',
name: 'Register',
component: Register,
redirect: '/register/register-oneself',
children: [
{
path: 'register-oneself',
name: 'RegisterOneslef',
component: RegisterOneself
},
{
path: 'register-business',
name: 'RegisterBusiness',
component: RegisterBusiness
}
]
}
注册页面点击切换的代码:
<div class="register-type">
<ul class="register-type-ul">
<router-link to="/register/register-oneself" class="register-type-ul-li" tag="li">个人账户</router-link>
<router-link to="/register/register-business" class="register-type-ul-li" tag="li">企业账户</router-link>
</ul>
</div>
<router-view/>
<router-view/>区域就是路由切换时,更新的内容区域。注意:页面内组件要定义在children里面,path里面加上/表示根目录,在children里面不需要加/。