support router.go for same page navigations

[jiaojiaodubai]

Describe the bug

I try to make a search box that would navigate to search results page with some search params after clicking "search" button, it works fine in dev mode, but can't work on search results page in build mode.

Reproduction

A online demo is available here.

1. Run npm run docs:dev in terminal.
2. Try using the search box in the navigation bar to enter letters for searching on the homepage, search results page, and Test Page.
3. Do the same things in 2. after runing npm run docs:build and npm run docs:preview.

Expected behavior

Build mode should have the same performance as dev mode. On search results page, page should refresh and apply new query params to filter results.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vitepress: latest => 1.5.0

Additional context

There is a related report here #813, but I don't think the problem I encountered is related to switching layouts, because my problem is shown on the same page in different modes.

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Ah, the router actually doesn't support same page navigations. You can do something like this in your SearchInput component:

vitepress/src/client/theme-default/components/VPAlgoliaSearchBox.vue

Lines 54 to 65 in c61182a

	const { pathname: hitPathname } = new URL(
	window.location.origin + itemUrl
	)
	// router doesn't handle same-page navigation so we use the native
	// browser location API for anchor navigation
	if (route.path === hitPathname) {
	window.location.assign(window.location.origin + itemUrl)
	} else {
	router.go(itemUrl)
	}
	}

Although it does change the visible URL, useUrlSearchParams cannot track those updates.

[jiaojiaodubai]

Thank you for your prompt response. I will try to adopt your suggestions to temporarily solve my problem and continue to monitor this issue.

[brc-dd]

This will be supported in next v2-alpha release. You can probably continue to use the location.assign hack till v2 gets beta or stable. vueuse's useUrlSearchParams won't work though. You'll need to do something like this:

const route = useRoute();

const results = computed(() => {
  const params = Object.fromEntries(new URLSearchParams(route.query));
  return params.char
    ? data.filter((word) =>
        word.toLowerCase().includes(params.char.toLowerCase())
      )
    : ['NO_RESULTS'];
});

https://stackblitz.com/edit/vite-9afg8su7?file=docs/components/ResultsList.vue