[Vuejs]-Vue router doesn't redirect to welcome page, if 404 page is defined with alias *

by

0👍

You should move the 404 page up in the tree to be out of any children arrays, remove its alias and instead set its path to be *. The catch-all route should always be last in your list of routes (otherwise it will hide all routes which are listed after it in the array).

Variant 1 – all routes are wrapped by TheContainer

App.vue

<template>
  <TheContainer>
    <MySidebar slot="sidebar" />
    <router-view />
  </TheContainer>
</template>

Variant 2 – custom layout in each route

App.vue

<template>
  <router-view />
</template>

Route A

<template>
  <LayoutA>
    <Sidebar slot="side" />
    <Toolbar slot="top" />
    <!-- content specific to the route -->
  </LayoutA>
</template>

Route B

<template>
  <LayoutY>
    <MyToolbar slot="top" />
    <!-- content for this route -->
    <MyFooter slot="bottom" />
  </LayoutY>
</template>

Leave a comment