Merge pull request #25 from Alystrasz/refactor/router-view

refactor: Router view

1 files changed, 24 insertions, 2 deletions

diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 0ac31a2d..dc18b443 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -2,14 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from "element-plus";
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { store } from './plugins/store';
+import PlayView from "./views/PlayView.vue";
+import ChangelogView from "./views/ChangelogView.vue";
+import SettingsView from "./views/SettingsView.vue";
+import DeveloperView from "./views/DeveloperView.vue";
+import {createRouter, createWebHashHistory} from "vue-router";
+
+
+const app = createApp(App);
 
 
 // styles
 import 'element-plus/theme-chalk/index.css';
 import './style.css'
-import { store } from './plugins/store';
 
-const app = createApp(App);
 app.use(ElementPlus);
 
 // icons
@@ -20,4 +27,19 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // style
 app.use( store, '$store' );
 
+
+// routes
+const routes = [
+    { path: '/', name: 'Main', component: async () => PlayView},
+    { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+    { path: '/settings', name: 'Settings', component: async () => SettingsView},
+    { path: '/dev', name: 'Dev', component: async () => DeveloperView}
+];
+export const router = createRouter({
+    history: createWebHashHistory(),
+    routes, // short for `routes: routes`
+});
+app.use(router);
+
+
 app.mount('#app')