feat: add useHistoryState()

Author: posva

packages/router/e2e/modal/index.ts

@@ -5,11 +5,14 @@ import {
   createWebHistory,
   useRoute,
   loadRouteLocation,
+  useHistoryState,
 } from 'vue-router'
 import {
   createApp,
   readonly,
   ref,
+  watch,
+  shallowRef,
   watchEffect,
   computed,
   defineComponent,
@@ -72,6 +75,7 @@ const Home = defineComponent({
     const route = useRoute()
 
     const userId = computed(() => route.params.id)
+    const historyState = useHistoryState<{ backgroundView?: string }>()
 
     watchEffect(
       () => {
@@ -187,14 +191,17 @@ router.beforeEach(to => {
 const app = createApp({
   setup() {
     const route = useRoute()
+    const historyState = useHistoryState<{ backgroundView?: string }>()
 
-    const routeWithModal = computed(() => {
+    const routeWithModal = shallowRef<RouteLocationNormalizedLoaded>(route)
+    watch(historyState, async () => {
       if (historyState.value.backgroundView) {
-        return router.resolve(
+        routeWithModal.value = router.resolve(
           historyState.value.backgroundView
         ) as RouteLocationNormalizedLoaded
+        await loadRouteLocation(routeWithModal.value)
       } else {
-        return route
+        routeWithModal.value = route
       }
     })
 

packages/router/src/history/state.ts

@@ -0,0 +1,22 @@
+import { isBrowser } from '../utils'
+import { useRouter } from '../useApi'
+import { computed } from 'vue'
+import { HistoryState } from './common'
+
+/**
+ * Reactive history state. Only available in browser.
+ *
+ * @experimental - DO NOT use in production
+ */
+export function useHistoryState<T = HistoryState>() {
+  const router = useRouter()
+  return computed<Readonly<T>>(() => {
+    if (!isBrowser) {
+      return {}
+    }
+
+    // Enforce automatically update when navigation happens
+    router.currentRoute.value
+    return window.history.state
+  })
+}

packages/router/src/index.ts

@@ -1,4 +1,5 @@
 export { createWebHistory } from './history/html5'
+export { useHistoryState } from './history/state'
 export { createMemoryHistory } from './history/memory'
 export { createWebHashHistory } from './history/hash'
 export { createRouterMatcher } from './matcher'