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.


    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') {
        path: '*',
        component: () => import('pages/Error404.vue')
    export default routes


      <q-page class="flex flex-center blogPage">
        <!-- content -->
    export default {
      name: 'BlogPage',
      background: blue;

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


Log in to reply