在做VUE项目时遇到的问题及解决办法(点击不同的标题加载不同的组件,使用路由去切换组件时,第一次进入这个页面没有默认显示的子组件)

在做VUE项目时遇到的问题及解决办法(点击不同的标题加载不同的组件,使用路由去切换组件时,第一次进入这个页面没有默认显示的子组件)
文章图片

如上图所示,点击【免费注册】按钮,进入到注册页面,我在注册页面区分个人账户和企业账户,点击对应的标题显示对应的子组件,但是发现刚进入页面的时候,是图2那样子,并没有默认选中显示的子组件。原来是因为定义注册页的路由时缺少重定向redirect指向默认的子组件。
【在做VUE项目时遇到的问题及解决办法(点击不同的标题加载不同的组件,使用路由去切换组件时,第一次进入这个页面没有默认显示的子组件)】【免费注册】按钮定义的路由:


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

注册页面点击切换的代码:
    个人账户 企业账户

区域就是路由切换时,更新的内容区域。注意:页面内组件要定义在children里面,path里面加上/表示根目录,在children里面不需要加/。

    推荐阅读