test: ♻️ update approach to changing page title

test/browser/features/fixtures/packages/vue-router/src/main.js

@@ -11,29 +11,40 @@ const endpoint = parameters.get('endpoint')
 
 const base = '/docs/vue-router'
 
+/** @typedef {import('vue-router').Router} Router */
 const router = createRouter({
   history: createWebHistory(base),
   routes: [
     {
       path: '/',
       name: 'home',
+      meta: { title: 'Home' },
       component: HomeView
     },
     {
       path: '/contacts/:contactId()',
       name: 'contact',
+      meta: { title: (route) => `Contact ${route.params.contactId}` },
       component: () => import('./views/ContactView.vue'),
       children: [
         {
           path: 'profile',
           name: 'profile', 
+          meta: { title: 'Contact Profile' },
           component: () => import('./views/ContactProfile.vue')
         }
       ]
     }
   ]
 })
 
+router.beforeEach((to, from, next) => {
+  const title = typeof to.meta.title === 'function' 
+    ? to.meta.title(to) 
+    : to.meta.title
+  document.title = title || 'Default Title'
+  next()
+})
 
 BugsnagPerformance.start({
     apiKey,

test/browser/features/fixtures/packages/vue-router/src/views/ContactProfile.vue

@@ -1,9 +1,3 @@
-<script setup>
-import { onMounted } from 'vue'
-
-onMounted(() => { document.title = 'Contact Profile'; })
-</script>
-
 <template>
   <div>
     <h1>Contact {{ $route.params.contactId }} Profile</h1>

test/browser/features/fixtures/packages/vue-router/src/views/ContactView.vue

@@ -1,8 +1,5 @@
 <script setup>
-import { onMounted } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
-
-onMounted(() => { document.title = 'Contact 1'; })
 </script>
 
 <template>