127 lines
4.3 KiB
JavaScript
127 lines
4.3 KiB
JavaScript
import { createRouter, createWebHistory } from 'vue-router'
|
|
import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js'
|
|
import About from '@/views/about/Index.vue'
|
|
import AboutPage from '@/views/about/About.vue'
|
|
import Acknowledgements from '@/views/about/Acknowledgements.vue'
|
|
import Wanderhome from '@/views/about/Wanderhome.vue'
|
|
import Home from '@/views/Home.vue'
|
|
import Quiz from '@/views/Quiz.vue'
|
|
|
|
const routes = [
|
|
{
|
|
path: '/',
|
|
name: 'Home',
|
|
component: Home,
|
|
meta: {
|
|
index: 0,
|
|
svgPath: mdiHome,
|
|
title: 'Home'
|
|
}
|
|
},
|
|
{
|
|
path: '/quiz',
|
|
name: 'Quiz',
|
|
component: Quiz,
|
|
meta: {
|
|
index: 1,
|
|
svgPath: mdiAccountQuestion,
|
|
title: 'Take the Quiz'
|
|
}
|
|
},
|
|
{
|
|
path: '/about',
|
|
name: 'About',
|
|
component: About,
|
|
meta: {
|
|
index: 2,
|
|
svgPath: mdiInformation,
|
|
title: 'About'
|
|
},
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'About',
|
|
component: AboutPage,
|
|
meta: {
|
|
index: 0,
|
|
parentIndex: 2,
|
|
svgPath: mdiInformation,
|
|
title: 'Background'
|
|
}
|
|
},
|
|
{
|
|
path: 'wanderhome',
|
|
name: 'Wanderhome',
|
|
component: Wanderhome,
|
|
meta: {
|
|
index: 1,
|
|
parentIndex: 2,
|
|
svgPath: mdiHandCoin,
|
|
title: 'About Wanderhome'
|
|
}
|
|
},
|
|
{
|
|
path: 'acknowledgements',
|
|
name: 'Acknowledgements',
|
|
component: Acknowledgements,
|
|
meta: {
|
|
index: 2,
|
|
parentIndex: 2,
|
|
svgPath: mdiAccountGroupOutline,
|
|
title: 'Acknowledgements'
|
|
}
|
|
},
|
|
{
|
|
path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
|
|
name: 'SourceCode',
|
|
meta: {
|
|
index: 3,
|
|
parentIndex: 2,
|
|
svgPath: mdiCodeTags,
|
|
title: 'View Source Code'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
const Router = createRouter({
|
|
history: createWebHistory(),
|
|
routes
|
|
})
|
|
|
|
Router.beforeEach((to, from, next) => {
|
|
if (to.meta.title != 'Home') {
|
|
document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
|
|
} else {
|
|
document.title = `Wanderhome Quiz | V.S.`
|
|
}
|
|
next()
|
|
})
|
|
|
|
Router.afterEach( (to, from) => {
|
|
const enterActiveClass = 'transition-all duration-300 ease-in'
|
|
const leaveActiveClass = 'transition-all duration-300 ease-out'
|
|
const baseFromClass = 'transform opacity-0 md:scale-75'
|
|
if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) {
|
|
const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index
|
|
const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index
|
|
const slideInDirection = toIndex < fromIndex ? 'md:-translate-x-1/3' : 'md:translate-x-1/3'
|
|
const slideOutDirection = toIndex < fromIndex ? 'md:translate-x-1/3' : 'md:-translate-x-1/3'
|
|
to.meta.mainEnterActiveClass = enterActiveClass
|
|
to.meta.mainLeaveActiveClass = leaveActiveClass
|
|
to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection
|
|
to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection
|
|
} else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
|
|
const fromIndex = from.meta.index
|
|
const toIndex = to.meta.index
|
|
const slideInDirection = toIndex < fromIndex ? 'md:-translate-y-1/3' : 'md:translate-y-1/3'
|
|
const slideOutDirection = toIndex < fromIndex ? 'md:translate-y-1/3' : 'md:-translate-y-1/3'
|
|
to.meta.panelEnterActiveClass = enterActiveClass
|
|
to.meta.panelLeaveActiveClass = leaveActiveClass
|
|
to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection
|
|
to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection
|
|
}
|
|
})
|
|
|
|
export default Router |