added 404 and dropped /home
This commit is contained in:
parent
1ff3b44061
commit
e173b84fdf
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -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
|
|
Loading…
Reference in a new issue