How to use router-link with ui-nav-item

[leibale]

Hi,

Is it possible to use router-link as a ui-nav-item in ui-drawer?

[elf-mouse]

<ui-nav>
  <template v-for="(item, index) in menu" :key="index">
    <router-link v-slot="{ href, isActive }" :to="{ name: item.url }">
      <ui-nav-item :href="href" :active="isActive"></ui-nav-item>
    </router-link>
  </template>
</ui-nav>

[leibale]

The rendered HTML for

<router-link v-slot="{ href, isActive }" to="/">
  <ui-nav-item :href="href" :active="isActive"></ui-nav-item>
</router-link>

is

<a href="/"> <!-- router-link -->
  <a href="/" class="mdc-list-item" tabindex="-1"> <!-- ui-nav-item -->
    <span class="mdc-list-item__ripple"></span>
    Cart
  </a>
</a>

I want to have one a element per ui-nav-item..

[elf-mouse]

• <router-link v-slot> for Vue 2.0
• <router-link custom v-slot> for Vue 3.0

try again!

[leibale]

Works like a charm, thanks

[leibale]

It is "working", but clicking the link makes the whole page refresh (probably cause ui-nav-item uses a element directly instead of using router-link)

[elf-mouse]

Indeed! <ui-nav-item> was originally intended to define a hyperlink (like <a> or <router-link>)

• If you want to prevent default event, you need to use @click.prevent for <a>/<ui-nav-item>/<router-link>
• If you want to render non-hyperlink list, you can use <ui-list> + <ui-item @click>

[leibale]

Hi @elf-mouse, I'm trying to get the drawer to close when a link inside is clicked, but have no luck... :(
Can you please give me an example of a drawer with a router-link inside that closes when the link is clicked?

Thanks

[elf-mouse]

<template>
  <!-- Drawer -->
  <ui-drawer v-model="open" type="modal">
    <ui-drawer-header>
      <ui-drawer-title>Test</ui-drawer-title>
    </ui-drawer-header>
    <ui-drawer-content>
      <ui-nav>
        <template v-for="(item, index) in links" :key="index">
          <router-link
            v-slot="{ href, isActive }"
            custom
            :to="{ name: item.url }"
          >
            <ui-nav-item
              :href="href"
              :active="isActive"
              @click.prevent="onLink(item)"
              >{{ item.name }}</ui-nav-item
            >
          </router-link>
        </template>
      </ui-nav>
    </ui-drawer-content>
  </ui-drawer>
  <ui-drawer-backdrop></ui-drawer-backdrop>
  <!-- Content -->
  <div class="demo-content">
    <!-- App bar -->
    <ui-top-app-bar
      fixed
      class="demo-app-bar"
      content-selector=".demo-app-content"
      @nav="balmUI.onOpen('open')"
    >
      Test
    </ui-top-app-bar>
    <!-- App content -->
    <div class="demo-app-content">
      <p v-for="i in 24" :key="i">Main Content {{ i }}</p>
    </div>
  </div>
</template>

import { useEvent } from 'balm-ui';

const links = [
  {
    name: 'Link1',
    url: 'test.main'
  },
  {
    name: 'Link2',
    url: 'test.sub'
  }
];

export default {
  data() {
    return {
      balmUI: useEvent(),
      links,
      open: false
    };
  },
  methods: {
    onLink(item) {
      this.open = false; // close drawer

      // this.$router.push({ name: item.url }); // redirect
    }
  }
};