Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// src/router/index.ts import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/', name: 'home', component: () => import('../views/HomeView.vue'), }, { path: '/users', name: 'users', component: () => import('../views/UsersView.vue'), }, { path: '/users/:id', name: 'user-detail', component: () => import('../views/UserDetailView.vue'), props: true, // pass :id as a prop }, { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('../views/NotFoundView.vue'), }, ]; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, scrollBehavior(to, from, savedPosition) { return savedPosition ?? { top: 0 }; }, }); export default router;
Result
Open