Link in MyLayout.vue open always new tab



  • @happymax :key is tiny



  • @patryckx Excuse me, yes is tiny in the code

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


  • @happymax the error continues?



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



  • @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



  • 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>
    


  • @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"
     >
    


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

    I hope it is useful for other Quasar Developers.



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



  • @tdekoekkoek

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


Log in to reply