Vue router starting route cant be redirected

0
votes

The problem I'm currently having is that my '/' route with vue-router shows an empty page.

my route looks like this 

const route = [
   {
    path: '',
    component: HomeTemplate,
    children: [
     {
      path: '/home', component: Homepage
     }
    ] 
   }
 ]

How can i redirect my '' or '/' route to a page not found component

1
javascriptvue.jsvue-router

1 Answers

0
votes

Try this:

const route = [
   {
        path: '/home',
        component: Homepage
   },
   {
        // other routes ...
   },
   {
        path: "*",
        component: PageNotFoundComponent
   }
 ]

If you want wrap one component into another, use <slot></slot> element, read here: https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Example:

ParentComponent:

<template>
  <div>
    <!-- Something fun -->
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

Child Component:

<template>
  <parent-component>
    <!-- Something else -->
  </parent-component>
</template>

<script>
import ParentComponent from 'path-to-parent-component'

export default {
  components: {ParentComponent}
}
</script>