Link in MyLayout.vue open always new tab

[happymax]

Hi all,
I’m new to this fantastic framework so sorry for my stupid question but I am unable to solve this simple problem.

If I link a new page of my first application to the standard menu in MyLayuot.vue, a new tab is always opened where the page is displayed.

How can I view the page inside the tab where the application is active by keeping the menu on the left?

The code is this

      <Q-item-label
        header
        class = "text-gray-8"
      >
        Menu
      </ Q-item-label>
      <EssentialLink
        v-for = "link in essentialLinks"
        : Key = "link.title"
        v-bind = "link"
      />

Thank you so much

[patryckx]

@happymax You need to access the EssentialLink component, and replace what is :link with :to pass your route. And remove the _blank target also

[happymax]

Thank you @patryckx - The blank char before Key is an error of my msg and is not in the code.

I have done this but the problem persists

data () {
   return {
     leftDrawerOpen: false,
     essentialLinks: [
       {
         title: 'Home',
         caption: 'Go to the home page',
         icon: 'home',
         to: '/index'
       },
  ....

[patryckx]

@happymax :key is tiny

[happymax]

@patryckx Excuse me, yes is tiny in the code

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />

[patryckx]

@happymax the error continues?

[patryckx]

@happymax I need to see your complete EssentialLink file, your Page, and your “route” file.

[happymax]

@patryckx This is my route file

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/login',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/index',
        component: () => import('pages/InitPage.vue'),
        meta: { requiresAuth: true }
      }
   ]
  }
]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

and the EssentialLink.vue file

<template>
  <q-item
    clickable
    tag="a"
    target="_blank"
    :href="link"
  >
    <q-item-section
      v-if="icon"
      avatar
    >
      <q-icon :name="icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
      <q-item-label caption>
        {{ caption }}
      </q-item-label>
    </q-item-section>
  </q-item>
</template>

<script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    }
  }
}
</script>

Thank you

[happymax]

This is may InitPage.vue

<template>
  <q-page class="flex flex-center">
    <h5>Welcome {{ this.getUserName }} </h5>
   </q-page>
</template>

<script>

export default {
 data () {
    return {
      username: ''
      }
 },

 computed: {

  getUserName () {
       return this.$store.getters['user/GetUserName']
    }

 },

 methods: {


    }

}
</script>

[patryckx]

@happymax

Ok, Note that you have modified the object from here to:

data () {
   return {
     leftDrawerOpen: false,
     essentialLinks: [
       {
         title: 'Home',
         caption: 'Go to the home page',
         icon: 'home',
         to: '/index'
       },

Then you need to change your essentialLink props:

Before:

link: {
      type: String,
      default: '#'
    },

After:

to: {
      type: String,
      default: '#'
    },

And also in essentialLink, where “link” props were used before, modify by “to” in <template> :

<q-item
   clickable
   :to="to"
 >

[happymax]

Thank you so much @patryckx, It works like a charm.

I hope it is useful for other Quasar Developers.

[tdekoekkoek]

This works great. I’m new to quasar and Vue. Is it easy to modify EssentialLink to support both :to and :link?

[dobbel]

@tdekoekkoek

EssentialLink is a custom component so you could add them both.