Vue router fixes

Author: zlrundefined

src/components/About.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hello">
-        <h1>{{ msg }}</h1>
+        <p>About Page</p>
         <i data-feather="home"></i>
     </div>
 </template>

src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <p>Home Page</p>
     <i data-feather="home"></i>
   </div>
 </template>

src/main.js

@@ -1,22 +1,9 @@
 import { createApp } from 'vue'
-import { createWebHistory, createRouter } from 'vue-router'
 import App from './App.vue'
-import './assets/css/tailwind.css'
-import Home from './components/Home'
-import About from './components/About'
 import router from './router'
+import './assets/css/tailwind.css'
 
 const feather = require('feather-icons')
 feather.replace()
 
-const routes = [
-    { path: '/', component: Home },
-    { path: '/about', component: About },
-];
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes
-});
-
 createApp(App).use(router).use(router).mount('#app')

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import Home from '../components/Home.vue'
 
 const routes = [
   {
@@ -13,7 +13,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../components/About.vue')
   }
 ]