What are advanced Vue Router patterns?

Advanced Vue Router patterns: 1. Nested routes: child routes within a parent component. Parent template must include a <RouterView />: { path: "/user/:id", component: UserLayout, children: [ { path: "", component: UserProfile }, { path: "posts", component: UserPosts } ] }. 2. Named routes: { path: "/user/:id", name: "UserDetail", component: UserDetail }. Navigate by name: router.push({ name: "UserDetail", params: { id } }). 3. Named views: render multiple components simultaneously: <RouterView name="sidebar" /> <RouterView /> — route: components: { default: Main, sidebar: Sidebar }. 4. Router meta + middleware: add meta to routes, process in beforeEach. Create a layered guard system. 5. Scroll behavior: scrollBehavior(to, from, savedPosition) { if (savedPosition) return savedPosition; return { top: 0 }; } — restore scroll on browser back. 6. Dynamic route addition: router.addRoute({ path: "/new", component: New }); router.removeRoute("RouteName"). Useful for permission-based route setup after login. 7. Route transition: use <RouterView v-slot="{ Component }"><Transition name="fade"><component :is="Component" /></Transition></RouterView>. 8. Typed routes (unplugin-typed-router): TypeScript types for route names and params. 9. View transitions API (experimental): native browser transition API with Vue Router integration for page transitions without CSS.