New page does not show



  • I created a new page using the Quasar command and I adjusted my routes.js file to have the path for the new page but my app keeps showing the index page when I go to the new page.

    routes.js:

    const routes = [
      {
        path: '/',
        component: () => import('layouts/MyLayout.vue'),
        children: [
          { path: '', component: () => import('pages/Index.vue') },
          { path: '/blog', component: () => import('pages/Blog.vue') }
        ]
      }
    ]
    
    // Always leave this as last one
    if (process.env.MODE !== 'ssr') {
      routes.push({
        path: '*',
        component: () => import('pages/Error404.vue')
      })
    }
    
    export default routes
    

    Blog.vue:

    <template>
      <q-page class="flex flex-center blogPage">
        <!-- content -->
        <p>hdjshdjshjs</p>
      </q-page>
    </template>
    
    
    
    <script>
    export default {
      name: 'BlogPage',
    }
    </script>
    
    <style>
    .blogPage{
      background: blue;
    }
    
    </style>
    




  • Many thanks! At first, it was not working when I made the changes, then I noticed that the url path is not what I expected on my version. The blog is only accessible by going to http://localhost:8080/Blog#/blog. I thought it would just be http://localhost:8080/blog but then that reverts automatically to http://localhost:8080/Blog#/ and just shows the index page again. I wonder why it only works with a double Blog path on my version? Your sandbox works correctly. I tried to find a difference but no luck. Basically I’m just typing in the url manually but now I’ve implemented your MyLayout.vue file
    and when I click on the Blog menu the path now has a hashtag before blog: http://localhost:8080/#/blog



  • The “#” is a missing history mode or rather, you’re vue-router is currently in “hash” mode. So, the “#” is normal before /blog.

    Scott


Log in to reply