Adding and accessing new pages

s.molinari

Can you post the code in your routes.js and also the q-item you added to the drawer?

Scott

digiproduct

@s-molinari Thanks for your response.

I deleted my previous attempt, and tried creating a new page called Leads, so I’ll post what I have now, as it exhibits the same …

From Routes.js

const routes = [
{
path: ‘/’,
component: () => import(‘layouts/MyLayout.vue’),
children: [
{ path: ‘’, component: () => import(‘pages/Index.vue’) }
]
},
{
path: ‘/leads’,
component: () => import(‘layouts/MyLayout.vue’),
children: [
{ path: ‘’, component: () => import(‘pages/Leads.vue’) }
]
}
]

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

export default routes

Here’s the Q-item from MyLayour.vue

    <q-item clickable tag="a"  href="/leads">
      <q-item-section avatar>
        <q-icon name="group" />
      </q-item-section>
      <q-item-section>
        <q-item-label>Leads</q-item-label>
        <q-item-label caption>Show all leads</q-item-label>
      </q-item-section>
    </q-item>

And I can confirm that I have a file called Leads.vue in the pages folder

Thanks for helping.

digiproduct

As an aside … how do I markup code to get it formatted better in replies?

s.molinari

Triple backticks. “```”. Wrap your code in them. You can also do “javascript” after the first set of tripple backticks and get highlighting.

Scott

s.molinari

Ok. Try this.

  <q-item clickable to="/leads">

Scott

s.molinari

Also, if you are just beginning with Vue, I’d suggest you take this course.

https://www.udemy.com/vuejs-2-the-complete-guide

It will save you and us a lot of unnecessary questions and answers.

Scott

digiproduct

@s-molinari PERFECT … worked immediately

So what is the tag=“a” for? Is that for external links? To indicate that it’s a fully qualified url?

s.molinari

Yup. That’s what it’s for. To “fill in” a normal a tag with external URL.

Scott

digiproduct

@s-molinari Thanks, appreciate the confirmation … and many thanks for helping me so quickly … much appreciated.

digiproduct

@s-molinari said in Adding and accessing new pages:

Also, if you are just beginning with Vue, I’d suggest you take this course.

https://www.udemy.com/vuejs-2-the-complete-guide

It will save you and us a lot of unnecessary questions and answers.

Scott

This course is currently available on Udemy at the knockdown price of just 11.99 … for the next 5 days only.

Just grabbed my copy … it’s a steal.

I already have some experience of Vue … but this will still be a great reference resource for such a steal of a price.