Skip to content
Snippets Groups Projects
Commit 0996c0f8 authored by ivelov-vm's avatar ivelov-vm
Browse files

feat: add 404 page

parent 494eb926
No related branches found
No related tags found
No related merge requests found
public/img/404.png

947 KiB

...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div <div
class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]" class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
></div> ></div>
<section class="relative z-10 px-[6.7%] mt-6"> <section class="relative z-10 px-[6.7%] mt-6">
<router-link <router-link
to="/blogs" to="/blogs"
...@@ -57,10 +57,10 @@ export default { ...@@ -57,10 +57,10 @@ export default {
mounted() { mounted() {
window.addEventListener("scroll", this.onScroll); window.addEventListener("scroll", this.onScroll);
if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) { // if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
this.$router.push("/blogs"); // this.$router.push("/blogs");
return; // return;
} // }
this.blog = this.blogs[this.$route.params.id - 1]; this.blog = this.blogs[this.$route.params.id - 1];
}, },
......
<template>
<div class="min-h-screen bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/404.png')]">
<HeaderComponent
current-page="404"
transparent
text-white
></HeaderComponent>
<h1 class="text-white font-medium text-[3.375rem] leading-[4.5rem] mt-10 sm:mt-20 md:mt-[214px] w-max mx-auto relative">
<FeatureLeftSvg class="absolute -translate-x-[91%] w-[51px] h-[51px] text-blue -top-[25px]"></FeatureLeftSvg>
Oops!
</h1>
<p class="mt-2 text-white leading-[1.625rem] text-center text-lg w-auto mx-auto">
It looks like something went wrong <br>
Reload the page or return to the home screen
</p>
<div class="flex justify-center mt-[30px]">
<router-link to="/" class="text-white rounded leading-[1.813rem] text-lg py-[14px] px-10 text-center w-max bg-blue hover:bg-blue-700 transition-colors">
Go to main page
</router-link>
</div>
</div>
</template>
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import FeatureLeftSvg from "../components/svg/FeatureLeftSvg.vue";
export default {
name: "NotFoundPage",
data() {
return {
scroll: window.scrollY,
blog: {},
};
},
mounted() {
window.addEventListener("scroll", this.onScroll);
if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
this.$router.push("/blogs");
return;
}
this.blog = this.blogs[this.$route.params.id - 1];
},
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
onScroll() {
this.scroll = window.scrollY;
},
},
components: { HeaderComponent, FeatureLeftSvg },
};
</script>
...@@ -4,6 +4,7 @@ import HomePage from "../pages/HomePage"; ...@@ -4,6 +4,7 @@ import HomePage from "../pages/HomePage";
import ServicesPage from "../pages/ServicesPage"; import ServicesPage from "../pages/ServicesPage";
import BlogsPage from "../pages/BlogsPage"; import BlogsPage from "../pages/BlogsPage";
import BlogPage from "../pages/BlogPage"; import BlogPage from "../pages/BlogPage";
import NotFoundPage from "../pages/NotFoundPage";
Vue.use(VueRouter); Vue.use(VueRouter);
const router = new VueRouter({ const router = new VueRouter({
...@@ -24,6 +25,10 @@ const router = new VueRouter({ ...@@ -24,6 +25,10 @@ const router = new VueRouter({
path: "/blogs/:id", path: "/blogs/:id",
component: BlogPage, component: BlogPage,
}, },
{
path: "/:pathMatch(.*)*",
component: NotFoundPage,
},
], ],
mode: "history", mode: "history",
}); });
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment