Link in MyLayout.vue open always new tab



  • 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



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



  • 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'
           },
      ....
    


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


Log in to reply