Active on `List Item` via active router?



  • I use List Item on sidebar.
    I would like to active item list via router active name???

    <q-list highlight>
      <q-list-header>Recent chats</q-list-header>
      <q-item>
        <q-item-side>
          <q-item-tile avatar>
            <img src="statics/boy-avatar.png">
          </q-item-tile>
        </q-item-side>
        <q-item-main label="John Doe" />
        <q-item-side right>
          <q-item-tile icon="chat_bubble" color="green" />
        </q-item-side>
      </q-item>
      <q-item>
        <q-item-side avatar="statics/linux-avatar.png" />
        <q-item-main label="Jim Doe" />
        <q-item-side right icon="chat_bubble" />
      </q-item>
      <q-item-separator />
      <q-list-header>Previous chats</q-list-header>
      <q-item>
        <q-item-side avatar="statics/guy-avatar.png" />
        <q-item-main label="Jack Doe" />
      </q-item>
    </q-list>
    


  • Now it work, I used q-scroll-area

          <q-scroll-area class="fit">
            <q-list-header>Left Panel</q-list-header>
            <q-item to="/showcase/layout-demo/play-with-layout">
              <q-item-side icon="account circle" />
              <q-item-main
                label="Play with Layout"
                sublabel="Learn more about it"
              />
              <q-item-side
                right
                icon="thumb_up"
              />
            </q-item>
    


  • oh maybe problem with <q-item to="/".
    And then still have problem with item selected
    0_1533386798458_425d0b3c-bf2b-414b-9777-c3f12760248d-image.png



  • Now I use redirect in Vue Router to break difference path

      {
        path: '',
        redirect: { name: 'home' },
      },
      {
        path: '/home',
        name: 'home',
        component: Home,
      },