vue_router_typescript_quickstart_route_definition_and_mounting.ts

1import { createApp } from 'vue'
2import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
3
4// 1. Define route components.
5// These can be imported from other files
6const Home = { template: '<div>Home</div>' }
7const About = { template: '<div>About</div>' }
8
9// 2. Define some routes
10// Each route should map to a component.
11const routes: RouteRecordRaw[] = [
12  { path: '/', component: Home },
13  { path: '/about', component: About },
14]
15
16// 3. Create the router instance and pass the `routes` option
17// You can pass in additional options here, but let's
18// keep it simple for now.
19const router = createRouter({
20  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
21  history: createWebHistory(),
22  routes, // short for `routes: routes`
23})
24
25// 5. Create and mount the root instance.
26const app = createApp({})
27// Make sure to _use_ the router instance to make the
28// whole app router-aware.
29app.use(router)
30
31app.mount('#app')
32
33// Now the app has started!