()
+ const decorated = Vue.ref(false)
+ const disabled = Vue.ref(false)
+
+ const rootRoute = createRootRoute({
+ component: Vue.defineComponent({
+ setup() {
+ return () =>
+ Vue.h(
+ Link as any,
+ {
+ to: to.value,
+ target: target.value,
+ disabled: disabled.value,
+ ...(decorated.value
+ ? { class: 'decorated', 'aria-label': 'Updated link' }
+ : {}),
+ },
+ { default: () => 'Dynamic link' },
+ )
+ },
+ }),
+ })
+ const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/posts',
+ })
+ const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([postsRoute, aboutRoute]),
+ history,
+ })
+ const navigateSpy = vi.spyOn(router, 'navigate')
+
+ render()
+
+ const link = await screen.findByRole('link', { name: 'Dynamic link' })
+ expect(link).toHaveAttribute('href', '/posts')
+ expect(link).not.toHaveClass('decorated')
+
+ to.value = 'https://example.com/one'
+ target.value = '_blank'
+ decorated.value = true
+ disabled.value = true
+ await Vue.nextTick()
+
+ expect(link).not.toHaveAttribute('href')
+ expect(link).toHaveAttribute('target', '_blank')
+ expect(link).toHaveAttribute('aria-label', 'Updated link')
+ expect(link).toHaveClass('decorated')
+ expect(link).toHaveAttribute('role', 'link')
+ expect(link).toHaveAttribute('aria-disabled', 'true')
+ expect(link).not.toHaveAttribute('disabled')
+
+ disabled.value = false
+ to.value = 'https://example.com/two'
+ await Vue.nextTick()
+ expect(link).toHaveAttribute('href', 'https://example.com/two')
+ expect(link).not.toHaveAttribute('aria-disabled')
+ expect(link).not.toHaveAttribute('disabled')
+
+ to.value = 'javascript:alert(1)'
+ await Vue.nextTick()
+ expect(link).not.toHaveAttribute('href')
+
+ to.value = 'https://example.com/three'
+ await Vue.nextTick()
+ expect(link).toHaveAttribute('href', 'https://example.com/three')
+
+ to.value = '/about'
+ target.value = undefined
+ decorated.value = false
+ disabled.value = false
+ await Vue.nextTick()
+
+ expect(link).toHaveAttribute('href', '/about')
+ expect(link).not.toHaveAttribute('target')
+ expect(link).not.toHaveAttribute('aria-label')
+ expect(link).not.toHaveClass('decorated')
+ expect(link).not.toHaveAttribute('aria-disabled')
+ expect(link).not.toHaveAttribute('disabled')
+
+ decorated.value = true
+ await Vue.nextTick()
+ expect(link).toHaveAttribute('aria-label', 'Updated link')
+ expect(link).toHaveClass('decorated')
+
+ decorated.value = false
+ await Vue.nextTick()
+ expect(link).not.toHaveAttribute('aria-label')
+ expect(link).not.toHaveClass('decorated')
+
+ await fireEvent.click(link)
+ expect(navigateSpy).toHaveBeenCalledOnce()
+ })
+
+ test('tracks router location after an external link becomes internal', async () => {
+ const to = Vue.ref('https://example.com')
+ const rootRoute = createRootRoute({
+ component: Vue.defineComponent({
+ setup() {
+ return () => (
+
+ Initially external
+
+ )
+ },
+ }),
+ })
+ const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/posts',
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([postsRoute]),
+ history,
+ })
+
+ render()
+
+ const link = await screen.findByRole('link', { name: 'Initially external' })
+ expect(link).toHaveAttribute('href', 'https://example.com')
+
+ to.value = '/posts'
+ await Vue.nextTick()
+ expect(link).toHaveAttribute('href', '/posts')
+
+ await fireEvent.click(link)
+ await waitFor(() => {
+ expect(window.location.pathname).toBe('/posts')
+ expect(link).toHaveAttribute('data-status', 'active')
+ })
+ })
+
+ test('uses current event handlers after link props change', async () => {
+ const firstClick = vi.fn((event: MouseEvent) => event.preventDefault())
+ const secondClick = vi.fn((event: MouseEvent) => event.preventDefault())
+ const firstMouseEnter = vi.fn()
+ const secondMouseEnter = vi.fn()
+ const clickHandler = Vue.shallowRef<
+ ((event: MouseEvent) => void) | undefined
+ >(firstClick)
+ const mouseEnterHandler = Vue.shallowRef<
+ ((event: MouseEvent) => void) | undefined
+ >(firstMouseEnter)
+ const disabled = Vue.ref(false)
+
+ const rootRoute = createRootRoute({
+ component: Vue.defineComponent({
+ setup() {
+ return () => (
+
+ Dynamic handlers
+
+ )
+ },
+ }),
+ })
+ const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/posts',
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([postsRoute]),
+ history,
+ })
+
+ render()
+
+ const link = await screen.findByRole('link', { name: 'Dynamic handlers' })
+ await fireEvent.click(link)
+ await fireEvent.mouseEnter(link)
+ expect(firstClick).toHaveBeenCalledOnce()
+ expect(firstMouseEnter).toHaveBeenCalledOnce()
+
+ clickHandler.value = secondClick
+ mouseEnterHandler.value = secondMouseEnter
+ await Vue.nextTick()
+ await fireEvent.click(link)
+ await fireEvent.mouseEnter(link)
+
+ expect(firstClick).toHaveBeenCalledOnce()
+ expect(firstMouseEnter).toHaveBeenCalledOnce()
+ expect(secondClick).toHaveBeenCalledOnce()
+ expect(secondMouseEnter).toHaveBeenCalledOnce()
+
+ clickHandler.value = undefined
+ mouseEnterHandler.value = undefined
+ await Vue.nextTick()
+ await fireEvent.click(link)
+ await fireEvent.mouseEnter(link)
+
+ expect(secondClick).toHaveBeenCalledOnce()
+ expect(secondMouseEnter).toHaveBeenCalledOnce()
+
+ disabled.value = true
+ await Vue.nextTick()
+ await fireEvent.click(link)
+ await fireEvent.mouseEnter(link)
+
+ expect(secondClick).toHaveBeenCalledOnce()
+ expect(secondMouseEnter).toHaveBeenCalledOnce()
+ })
+
describe('when the current route has a search fields with undefined values', () => {
async function runTest(opts: { explicitUndefined: boolean | undefined }) {
const rootRoute = createRootRoute()
@@ -5284,6 +5498,112 @@ describe('Link', () => {
expect(mock).toHaveBeenCalledTimes(1)
})
+ test('Link.preload="render" preloads each reactive destination', async () => {
+ const to = Vue.ref('/posts')
+ const rootRoute = createRootRoute({
+ component: Vue.defineComponent({
+ setup() {
+ return () => (
+
+ Dynamic render preload
+
+ )
+ },
+ }),
+ })
+ const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/posts',
+ })
+ const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([postsRoute, aboutRoute]),
+ history,
+ })
+ const preloadRouteSpy = vi.spyOn(router, 'preloadRoute')
+
+ render()
+
+ const link = await screen.findByRole('link', {
+ name: 'Dynamic render preload',
+ })
+ await waitFor(() => expect(preloadRouteSpy).toHaveBeenCalledOnce())
+ expect(link).toHaveAttribute('href', '/posts')
+
+ to.value = '/about'
+ await waitFor(() => expect(preloadRouteSpy).toHaveBeenCalledTimes(2))
+ expect(link).toHaveAttribute('href', '/about')
+ })
+
+ test('cancels stale delayed preloads after link inputs change', async () => {
+ const to = Vue.ref('/posts')
+ const disabled = Vue.ref(false)
+ const rootRoute = createRootRoute({
+ component: Vue.defineComponent({
+ setup() {
+ return () => (
+
+ Dynamic intent preload
+
+ )
+ },
+ }),
+ })
+ const postsRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/posts',
+ })
+ const aboutRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/about',
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([postsRoute, aboutRoute]),
+ history,
+ })
+ const preloadRouteSpy = vi.spyOn(router, 'preloadRoute')
+
+ render()
+ const link = await screen.findByRole('link', {
+ name: 'Dynamic intent preload',
+ })
+ vi.useFakeTimers()
+
+ await fireEvent.mouseEnter(link)
+ disabled.value = true
+ await Vue.nextTick()
+ await vi.advanceTimersByTimeAsync(50)
+ expect(preloadRouteSpy).not.toHaveBeenCalled()
+
+ disabled.value = false
+ await Vue.nextTick()
+ await fireEvent.mouseEnter(link)
+ to.value = '/about'
+ await Vue.nextTick()
+ await vi.advanceTimersByTimeAsync(50)
+ expect(preloadRouteSpy).not.toHaveBeenCalled()
+
+ await fireEvent.mouseEnter(link)
+ to.value = 'https://example.com'
+ await Vue.nextTick()
+ await vi.advanceTimersByTimeAsync(50)
+ expect(preloadRouteSpy).not.toHaveBeenCalled()
+
+ to.value = '/about'
+ await Vue.nextTick()
+ await fireEvent.mouseEnter(link)
+ await vi.advanceTimersByTimeAsync(50)
+ expect(preloadRouteSpy).toHaveBeenCalledOnce()
+ })
+
test.each([undefined, false, 'render', 'viewport'] as const)(
'Link.preload="%s" should not preload on focus, hover, or touchstart',
async (preloadMode) => {
diff --git a/packages/vue-router/tests/remountDeps.test.tsx b/packages/vue-router/tests/remountDeps.test.tsx
new file mode 100644
index 00000000000..ff9bf6808e3
--- /dev/null
+++ b/packages/vue-router/tests/remountDeps.test.tsx
@@ -0,0 +1,100 @@
+import * as Vue from 'vue'
+import { cleanup, render, screen } from '@testing-library/vue'
+import { afterEach, expect, test, vi } from 'vitest'
+import {
+ Outlet,
+ RouterProvider,
+ createMemoryHistory,
+ createRootRoute,
+ createRoute,
+ createRouter,
+} from '../src'
+
+afterEach(() => {
+ cleanup()
+})
+
+function setup(remountOnParams: boolean | 'falsy' = false) {
+ const mounted = vi.fn()
+ const unmounted = vi.fn()
+ const rootRoute = createRootRoute({ component: () => })
+ const ItemComponent = Vue.defineComponent({
+ name: 'ItemComponent',
+ setup() {
+ const params = itemRoute.useParams()
+
+ Vue.onMounted(mounted)
+ Vue.onUnmounted(unmounted)
+
+ return () => Item {params.value.itemId}
+ },
+ })
+ const itemRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/items/$itemId',
+ component: ItemComponent,
+ remountDeps:
+ remountOnParams === 'falsy'
+ ? ({ params }) => (params.itemId === 'one' ? false : 0)
+ : remountOnParams
+ ? ({ params }) => params
+ : undefined,
+ })
+ const router = createRouter({
+ routeTree: rootRoute.addChildren([itemRoute]),
+ history: createMemoryHistory({ initialEntries: ['/items/one'] }),
+ })
+
+ render()
+
+ return { mounted, router, unmounted }
+}
+
+async function navigateToSecondItem(
+ router: ReturnType['router'],
+) {
+ await router.navigate({
+ to: '/items/$itemId',
+ params: { itemId: 'two' },
+ })
+}
+
+test('keeps an active route component mounted when params change by default', async () => {
+ const { mounted, router, unmounted } = setup()
+
+ expect(await screen.findByText('Item one')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(1)
+ expect(unmounted).not.toHaveBeenCalled()
+
+ await navigateToSecondItem(router)
+
+ expect(await screen.findByText('Item two')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(1)
+ expect(unmounted).not.toHaveBeenCalled()
+})
+
+test('remounts an active route component when params are remount deps', async () => {
+ const { mounted, router, unmounted } = setup(true)
+
+ expect(await screen.findByText('Item one')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(1)
+
+ await navigateToSecondItem(router)
+
+ expect(await screen.findByText('Item two')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(2)
+ expect(unmounted).toHaveBeenCalledTimes(1)
+})
+
+test('remounts when remount deps change between falsy values', async () => {
+ const { mounted, router, unmounted } = setup('falsy')
+
+ expect(await screen.findByText('Item one')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(1)
+
+ await navigateToSecondItem(router)
+
+ expect(await screen.findByText('Item two')).toBeInTheDocument()
+ expect(mounted).toHaveBeenCalledTimes(2)
+ expect(unmounted).toHaveBeenCalledTimes(1)
+})