refactor: define routes in `createRouter()` for better autocompletion

After this commit, the `route` & `typescript-route` templates have more
duplication than before.
I'll investigate later to see if the code templates can be further
simplified.

diff --git a/template/code/router/src/router/index.js b/template/code/router/src/router/index.js
index 26bf8e7e50f452053f622b41902b3675d37040b8..e0434fd07b98c4031e12830fb0b0c087723f8cf0 100644 (file)
--- a/template/code/router/src/router/index.js
+++ b/template/code/router/src/router/index.js
@@ -1,25 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // 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('../views/About.vue')
-  }
-]
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'About',
+      // 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('../views/About.vue')
+    }
+  ]
 })
 
 export default router

diff --git a/template/code/typescript-router/src/router/index.ts b/template/code/typescript-router/src/router/index.ts
index 06036285673941108e11b8f689867504ed461d31..e0434fd07b98c4031e12830fb0b0c087723f8cf0 100644 (file)
--- a/template/code/typescript-router/src/router/index.ts
+++ b/template/code/typescript-router/src/router/index.ts
@@ -1,27 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-
 import Home from '../views/Home.vue'
 
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // 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('../views/About.vue')
-  }
-]
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'About',
+      // 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('../views/About.vue')
+    }
+  ]
 })
 
 export default router