added 404 and dropped /home

This commit is contained in:
Keyemail 2024-01-12 19:51:20 -08:00
parent 1ff3b44061
commit e173b84fdf
3 changed files with 41 additions and 40 deletions

View file

@ -3,14 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
import homeView from '../views/HomePage.vue' import homeView from '../views/HomePage.vue'
import galleryView from '../views/GalleryPage.vue' import galleryView from '../views/GalleryPage.vue'
import socialView from '../views/SocialsPage.vue' import socialView from '../views/SocialsPage.vue'
import notFoundPage from '../views/404Page.vue'
const routes = [ const routes = [
{ {
path: '/', path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home', name: 'home',
component: homeView component: homeView
}, },
@ -23,6 +20,10 @@ const routes = [
path: '/socials', path: '/socials',
name: 'socials', name: 'socials',
component: socialView component: socialView
},
{
path: '/:pathMatch(.*)',
component: notFoundPage
} }
] ]

View file

@ -1,3 +1,37 @@
<template> <template>
<div></div> <div class="notFound">
</template> <h1>404 Page</h1>
<p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
</div>
</template>
<style>
.notFound {
display: flex;
flex-direction: column;
color: white;
font-family: 'Rubik', sans-serif;
align-items: center;
justify-content: center;
height: 100%;
}
.notFound h1 {
font-size: 70px;
padding: 20px;
}
.notFound p {
font-size: 30px;
}
.notFound a {
text-decoration: none;
color: #ADD8E6;
transition: 0.3s color;
}
.notFound a:hover {
color: #74d2f1
}
</style>

View file

@ -1,34 +0,0 @@
import { createRouter, createWebHistory } from 'vue-router'
import homeView from '../views/HomePage.vue'
import galleryView from '../views/GalleryPage.vue'
import socialView from '../views/SocialsPage.vue'
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: homeView
},
{
path: '/gallery',
name: 'gallery',
component: galleryView
},
{
path: '/socials',
name: 'socials',
component: socialView
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router