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

如上图所示,点击【免费注册】按钮,进入到注册页面,我在注册页面区分个人账户和企业账户,点击对应的标题显示对应的子组件,但是发现刚进入页面的时候,是图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里面不需要加/。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值