No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Link in MyLayout.vue open always new tab

    Framework
    4
    13
    1051
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • patryckx
      patryckx @happymax last edited by 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

      1 Reply Last reply Reply Quote 0
      • H
        happymax last edited by

        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 1 Reply Last reply Reply Quote 0
        • patryckx
          patryckx @happymax last edited by patryckx

          @happymax :key is tiny

          1 Reply Last reply Reply Quote 0
          • H
            happymax last edited by

            @patryckx Excuse me, yes is tiny in the code

                    <EssentialLink
                      v-for="link in essentialLinks"
                      :key="link.title"
                      v-bind="link"
                    />
            
            patryckx 2 Replies Last reply Reply Quote 0
            • patryckx
              patryckx @happymax last edited by

              @happymax the error continues?

              1 Reply Last reply Reply Quote 0
              • patryckx
                patryckx @happymax last edited by

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

                1 Reply Last reply Reply Quote 0
                • H
                  happymax last edited by

                  @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

                  1 Reply Last reply Reply Quote 0
                  • H
                    happymax last edited by

                    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 1 Reply Last reply Reply Quote 0
                    • patryckx
                      patryckx @happymax last edited by 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"
                       >
                      
                      1 Reply Last reply Reply Quote 1
                      • H
                        happymax last edited by

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

                        I hope it is useful for other Quasar Developers.

                        1 Reply Last reply Reply Quote 1
                        • T
                          tdekoekkoek last edited by

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

                          dobbel 1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @tdekoekkoek last edited by

                            @tdekoekkoek

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

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post