New page does not show

[izzy]

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>

[s.molinari]

Just use blog.

https://codesandbox.io/s/codesandbox-app-7sezk

Scott

[izzy]

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

[s.molinari]

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

Scott