Creating a parent route in Vue Router without a path causes it to match the root route-CodePudding

I have a Vue Router setup with a homepage with a path of '/', then I also separately have a parent template, which is a header and footer. This parent has children. I don't want the parent to have a path, only its children. However, when I have the parent and children listed below the home page and leave the path blank, the parent loads when the base URL is navigated to instead of the home page. Am I going about this wrong?

routes: [
{
  path: '/',
  name: 'home',
  component: HomeView
},
{
  component: HeaderFooter,
  children: [
    {
      path: '/category',
      component: CategoryView
    }
  ]
},

I'll add in the HeaderFooter component just for clarity. It's just a component with the header, footer and a router view so I can apply the header and footer to all pages that I want to have them easily from the router.

<script>
import TheHeader from '../components/TheHeader.vue'
import TheFooter from '../components/TheFooter.vue'

export default {
    components: {
        TheHeader,TheFooter
    }
}
</script>
<template>
    <the-header></the-header>
    <router-view></router-view>
    <the-footer></the-footer>
</template>

CodePudding user response：

Child route paths are added to parent path.

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew        
      },
      {
        path: ':id',
        component: PostsDetail,
      }
    ]
  }
]

here child path is like /posts/new or /posts/123

So without a complete parent definition child routes won't function as expected.

You don't need a rooter definition for header and footer components. You can just load related one in the component.

CodePudding user response：

I don’t want the homepage to have the header and footer but I do want the category page and future other pages to have the header and footer.

My answer will be a response to this comment since it gets to the heart of what you're trying to accomplish. First, I don't think a solution to this problem should involve modifying your routes array. Remove the HeaderFooter component and set up your routing like normal -- don't do anything fancy within the routes to control whether the header or footer is displayed. All pages, unless you have some other special cases per your app's requirements, should be handled by the same <router-view />. Surrounding it can be your header and footer components that you can then conditionally render based on the current route. Since you want them displayed on every page except the home page, it should be pretty easy:

<template>
  <div>
    <the-header v-if="$route.name !== 'home'" />
    <router-view />
    <the-footer v-if="$route.name !== 'home'" />
  <div>
</template>