Adding and accessing new pages



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



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

    Scott



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



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



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

    Scott



  • Ok. Try this.

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

    Scott



  • 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



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



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

    Scott



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



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


Log in to reply