Improved seperate admin routing

frontend/components/pages/Admin.vue

@@ -4,37 +4,37 @@
 		<div class='tabs is-centered'>
 			<ul>
 				<li :class='{ "is-active": currentTab == "queueSongs" }' @click='showTab("queueSongs")'>
-					<a>
+					<a v-link="{ path: '/admin/queuesongs' }">
 						<i class='material-icons'>queue_music</i>
 						<span>&nbsp;Queue Songs</span>
 					</a>
 				</li>
 				<li :class='{ "is-active": currentTab == "songs" }' @click='showTab("songs")'>
-					<a>
+					<a v-link="{ path: '/admin/songs' }">
 						<i class='material-icons'>music_note</i>
 						<span>&nbsp;Songs</span>
 					</a>
 				</li>
 				<li :class='{ "is-active": currentTab == "stations" }' @click='showTab("stations")'>
-					<a>
+					<a v-link="{ path: '/admin/stations' }">
 						<i class='material-icons'>hearing</i>
 						<span>&nbsp;Stations</span>
 					</a>
 				</li>
 				<li :class='{ "is-active": currentTab == "reports" }' @click='showTab("reports")'>
-					<a>
+					<a v-link="{ path: '/admin/reports' }">
 						<i class="material-icons">report_problem</i>
 						<span>&nbsp;Reports</span>
 					</a>
 				</li>
 				<li :class='{ "is-active": currentTab == "news" }' @click='showTab("news")'>
-					<a>
+					<a v-link="{ path: '/admin/news' }">
 						<i class="material-icons">chrome_reader_mode</i>
 						<span>&nbsp;News</span>
 					</a>
 				</li>
 				<li :class='{ "is-active": currentTab == "users" }' @click='showTab("users")'>
-					<a>
+					<a v-link="{ path: '/admin/users' }">
 						<i class="material-icons">person</i>
 						<span>&nbsp;Users</span>
 					</a>
@@ -73,6 +73,30 @@
 			News,
 			Users
 		},
+		ready() {
+			switch(this.$route.path) {
+				case '/admin/queuesongs':
+					this.currentTab = 'queueSongs';
+					break;
+				case '/admin/songs':
+					this.currentTab = 'songs';
+					break;
+				case '/admin/stations':
+					this.currentTab = 'stations';
+					break;
+				case '/admin/reports':
+					this.currentTab = 'reports';
+					break;
+				case '/admin/news':
+					this.currentTab = 'news';
+					break;
+				case '/admin/users':
+					this.currentTab = 'users';
+					break;
+				default:
+					this.currentTab = 'queueSongs';
+			}
+		},
 		data() {
 			return {
 				currentTab: 'queueSongs'

frontend/main.js

@@ -7,14 +7,7 @@ import io from './io';
 import NotFound from './components/404.vue';
 import Home from './components/pages/Home.vue';
 import Station from './components/Station/Station.vue';
-
 import Admin from './components/pages/Admin.vue';
-import AdminNews from './components/Admin/News.vue';
-import AdminUsers from './components/Admin/Users.vue';
-import AdminReports from './components/Admin/Reports.vue';
-import AdminStations from './components/Admin/Stations.vue';
-import AdminSongs from './components/Admin/Songs.vue';
-import AdminQueueSongs from './components/Admin/QueueSongs.vue';
 
 import News from './components/pages/News.vue';
 import About from './components/pages/About.vue';
@@ -113,28 +106,8 @@ router.map({
 		component: Admin,
 		adminRequired: true
 	},
-	'/admin/news': {
-		component: AdminNews,
-		adminRequired: true
-	},
-	'/admin/users': {
-		component: AdminUsers,
-		adminRequired: true
-	},
-	'/admin/reports': {
-		component: AdminReports,
-		adminRequired: true
-	},
-	'/admin/stations': {
-		component: AdminStations,
-		adminRequired: true
-	},
-	'/admin/songs': {
-		component: AdminSongs,
-		adminRequired: true
-	},
-	'/admin/queuesongs': {
-		component: AdminQueueSongs,
+	'/admin/:page': {
+		component: Admin,
 		adminRequired: true
 	},
 	'/official/:id': {