Adding and accessing new pages

digiproduct

Just started looking into Quasar on Friday, and installed it for testing yesterday.

I created a new Quasar project using the Quasar CLI using Quasar V1.0 Beta7

I successfully created another page in a file called Organizations.vue, and can access the page if I type the url direct into my browser like

localhost:8080/#/organizations

I tried to just alter the routes.js by copying the existing route, and changing the path to /organisations and the imported child component to pages/Organizations.vue

Then I expected that adding a new q-item into the list for the leftDrawer would provide me the relevant link in the Essential Links list …

But what actually gets generated into the browser from the created link inside the app is

localhost:8080/organizations#/

Probably something simple that I’ve overlooked, but I can’t figure it out at the moment.

I mean adding new pages has to be simple stuff … got to be something stupid that I’m doing …

Can anyone help me?

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.

No More Posting New Topics!

Adding and accessing new pages