Q-route-tab with Q-tab-panel: how to set active tab

[kelly7]

I have a button, for jumping to the Q-tab-panels layout, and I made it jumping to the first tab’s page.

<q-btn round @click="toUser()" unelevated>
//script
toUser(){
      this.$router.push({
        name: 'UserInfo',
        params:{ uId: this.uId}
      })
    },

{
        path:'/user',
        component: () => import('layouts/UserLayout'),
        children: [
          {
            name: 'UserInfo',
            path: '/user/info/:uId',
            component: () => import('pages/User/UserInfo')
          },
    ]
}

<!--the layout page-->
<q-page>
    <q-splitter
      v-model="splitterModel"
    >
      <template v-slot:before style="width: 30%">
        <q-tabs
            v-model="routeName"
            vertical
            class="text-blue-grey-13"
            active-color="blue-grey-14"
          >
            <q-route-tab v-for="r in routeList" :key="r.name" :name="r.name"
                         :to="{name: r.name, params:r.params}" :icon="r.icon" :label="r.label" />
        </q-tabs>
      </template>

      <template v-slot:after>
        <q-tab-panels v-model="routeName">
          <q-tab-panel :name="routeName">
            <router-view />
          </q-tab-panel>
        </q-tab-panels>
      </template>
    </q-splitter>
  </q-page>
//script
computed: {
    routeName() {
      return this.$route.name
    },
}

I clicked the button- the page content was right, but the first tab was not active. Only after I clicking a tab, that tab became active.
I want to make the first tab active when I click the button.
Thank you very much.

[beets]

@kelly7 routetabs should do this automatically. Try removing

v-model="routeName"

and

:name="r.name"

[kelly7]

@beets Thank you. But this didn’t work.