diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
index 382142b38..6b110251e 100644
--- a/web/src/components/FileBrowser/FileBrowserPagination.vue
+++ b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -19,10 +19,9 @@
       <v-icon>mdi-chevron-left</v-icon>
     </v-btn>
     <v-text-field
-      v-model="pageInput"
+      v-model.number="pageInput"
       hide-details
       single-line
-      type="number"
       dense
       style="max-width: 5%;"
       class="pa-0 mx-2 my-0"
@@ -31,7 +30,9 @@
       :max="pageCount"
       :maxlength="pageCount"
       :rules="[pageIsValid]"
+      @change="emit('changePage', pageInput)"
     />
+
     <span>of {{ pageCount }}</span>
     <v-btn
       class="mx-2"
@@ -53,7 +54,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { toRef } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 const props = defineProps({
   page: {
@@ -66,21 +68,14 @@ const props = defineProps({
   },
 });
 
+const route = useRoute();
+
 function pageIsValid(page: number): boolean {
   return page > 0 && page <= props.pageCount;
 }
 
 const emit = defineEmits(['changePage']);
 
-// Note: the v-textfield `v-model` returns a string value despite its type being 'number', so
-// we have to handle converting back and forth below.
-const pageInput = ref(props.page.toString());
+const pageInput = Number(route.query.page) || toRef(props, 'page');
 
-watch(() => props.page, (newPage) => { pageInput.value = newPage.toString(); });
-watch(pageInput, (newPage) => {
-  const page = Number(newPage);
-  if (page > 0 && page <= props.pageCount) {
-    emit('changePage', page);
-  }
-});
 </script>
diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
index 247916b5e..aec7e9d48 100644
--- a/web/src/views/FileBrowserView/FileBrowser.vue
+++ b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -246,7 +246,7 @@
         v-if="currentDandiset.asset_count"
         :page="page"
         :page-count="pages"
-        @changePage="page = $event;"
+        @changePage="changePage($event)"
       />
     </v-container>
   </div>
@@ -437,9 +437,10 @@ function showDelete(item: AssetPath) {
 async function getItems() {
   updating.value = true;
   let resp;
+  const currentPage = Number(route.query.page) || page.value;
   try {
     resp = await dandiRest.assetPaths(
-      props.identifier, props.version, location.value, page.value, FILES_PER_PAGE,
+      props.identifier, props.version, location.value, currentPage, FILES_PER_PAGE,
     );
   } catch (e) {
     if (axios.isAxiosError(e) && e.response?.status === 404) {
@@ -502,7 +503,7 @@ watch(location, () => {
   if (existingLocation === location.value) { return; }
   router.push({
     ...route,
-    query: { location: location.value },
+    query: { location: location.value, page: String(page.value) },
   } as RawLocation);
 });
 
@@ -518,8 +519,13 @@ watch(() => route.query, (newRouteQuery) => {
   getItems();
 }, { immediate: true });
 
-// fetch new page of items when a new one is selected
-watch(page, getItems);
+function changePage(newPage: number) {
+  page.value = newPage;
+  router.push({
+    ...route,
+    query: { location: location.value, page: String(page.value) },
+  } as RawLocation);
+}
 
 // Fetch dandiset if necessary
 onMounted(() => {