+ Loading...
@@ -27,9 +31,54 @@ Let's assume we have a `Post` component that needs to fetch the data for a post
{{ post.title }}
+{{ post.body }}
+
+
+
+
+
@@ -26,32 +36,38 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje
-
+ 
+ 
+
+ The official
+Vue.js Certification
+Get certified!
+ diff --git a/packages/docs/.vitepress/theme/components/HomeSponsors.vue b/packages/docs/.vitepress/theme/components/HomeSponsors.vue index 458b02c7d..8bd5f1748 100644 --- a/packages/docs/.vitepress/theme/components/HomeSponsors.vue +++ b/packages/docs/.vitepress/theme/components/HomeSponsors.vue @@ -1,3 +1,16 @@ + +{{ post.body }}
+
-
-
-
-
Current route path: {{ $route.fullPath }}
+ +{{ $route.fullPath }} 。你可以在组件模板中使用 `$route` 来访问当前的路由对象。
-### `router-view`
+${name || 'No Name'}
`, diff --git a/packages/router/__tests__/hash-manual-navigation.spec.ts b/packages/router/__tests__/hash-manual-navigation.spec.ts index a465bb309..9a0887c43 100644 --- a/packages/router/__tests__/hash-manual-navigation.spec.ts +++ b/packages/router/__tests__/hash-manual-navigation.spec.ts @@ -1,5 +1,6 @@ import { createMemoryHistory, createRouter, RouterHistory } from '../src' import { tick } from './utils' +import { describe, expect, it } from 'vitest' const component = {} @@ -34,7 +35,7 @@ describe('hash history edge cases', () => { return }) - // const spy = jest.spyOn(history, 'go') + // const spy = vi.spyOn(history, 'go') history.changeURL('/') await tick() @@ -71,7 +72,7 @@ describe('hash history edge cases', () => { return }) - // const spy = jest.spyOn(history, 'go') + // const spy = vi.spyOn(history, 'go') history.changeURL('/') await tick() diff --git a/packages/router/__tests__/history/hash.spec.ts b/packages/router/__tests__/history/hash.spec.ts index 43a299c15..65cc6dfdd 100644 --- a/packages/router/__tests__/history/hash.spec.ts +++ b/packages/router/__tests__/history/hash.spec.ts @@ -2,12 +2,23 @@ import { JSDOM } from 'jsdom' import { createWebHashHistory } from '../../src/history/hash' import { createWebHistory } from '../../src/history/html5' import { createDom } from '../utils' -import { mockWarn } from 'jest-mock-warn' - -jest.mock('../../src/history/html5') +import { mockWarn } from '../vitest-mock-warn' +import { + vi, + describe, + expect, + it, + beforeAll, + beforeEach, + Mock, + afterAll, + afterEach, +} from 'vitest' + +vi.mock('../../src/history/html5') // override the value of isBrowser because the variable is created before JSDOM // is created -jest.mock('../../src/utils/env', () => ({ +vi.mock('../../src/utils/env', () => ({ isBrowser: true, })) @@ -19,7 +30,7 @@ describe('History Hash', () => { mockWarn() beforeEach(() => { - ;(createWebHistory as jest.Mock).mockClear() + ;(createWebHistory as Mock).mockClear() }) afterAll(() => { diff --git a/packages/router/__tests__/history/html5.spec.ts b/packages/router/__tests__/history/html5.spec.ts index 4eb446a36..88bc12f65 100644 --- a/packages/router/__tests__/history/html5.spec.ts +++ b/packages/router/__tests__/history/html5.spec.ts @@ -1,10 +1,20 @@ import { JSDOM } from 'jsdom' import { createWebHistory } from '../../src/history/html5' import { createDom } from '../utils' +import { + vi, + describe, + expect, + it, + beforeAll, + beforeEach, + afterAll, + afterEach, +} from 'vitest' // override the value of isBrowser because the variable is created before JSDOM // is created -jest.mock('../../src/utils/env', () => ({ +vi.mock('../../src/utils/env', () => ({ isBrowser: true, })) @@ -89,7 +99,7 @@ describe('History HTMl5', () => { it('prepends the host to support // urls', () => { let history = createWebHistory() - let spy = jest.spyOn(window.history, 'pushState') + let spy = vi.spyOn(window.history, 'pushState') history.push('/foo') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -108,7 +118,7 @@ describe('History HTMl5', () => { describe('specific to base containing a hash', () => { it('calls push with hash part of the url with a base', () => { dom.reconfigure({ url: 'file:///usr/etc/index.html' }) - let initialSpy = jest.spyOn(window.history, 'replaceState') + let initialSpy = vi.spyOn(window.history, 'replaceState') let history = createWebHistory('#') // initial navigation expect(initialSpy).toHaveBeenCalledWith( @@ -116,7 +126,7 @@ describe('History HTMl5', () => { expect.any(String), '#/' ) - let spy = jest.spyOn(window.history, 'pushState') + let spy = vi.spyOn(window.history, 'pushState') history.push('/foo') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -129,7 +139,7 @@ describe('History HTMl5', () => { it('works with something after the hash in the base', () => { dom.reconfigure({ url: 'file:///usr/etc/index.html' }) - let initialSpy = jest.spyOn(window.history, 'replaceState') + let initialSpy = vi.spyOn(window.history, 'replaceState') let history = createWebHistory('#something') // initial navigation expect(initialSpy).toHaveBeenCalledWith( @@ -137,7 +147,7 @@ describe('History HTMl5', () => { expect.any(String), '#something/' ) - let spy = jest.spyOn(window.history, 'pushState') + let spy = vi.spyOn(window.history, 'pushState') history.push('/foo') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -150,7 +160,7 @@ describe('History HTMl5', () => { it('works with #! and on a file with initial location', () => { dom.reconfigure({ url: 'file:///usr/etc/index.html#!/foo' }) - let spy = jest.spyOn(window.history, 'replaceState') + let spy = vi.spyOn(window.history, 'replaceState') createWebHistory('#!') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -162,7 +172,7 @@ describe('History HTMl5', () => { it('works with #other', () => { dom.reconfigure({ url: 'file:///usr/etc/index.html' }) - let spy = jest.spyOn(window.history, 'replaceState') + let spy = vi.spyOn(window.history, 'replaceState') createWebHistory('#other') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -174,7 +184,7 @@ describe('History HTMl5', () => { it('works with custom#other in domain', () => { dom.reconfigure({ url: 'https://esm.dev/custom' }) - let spy = jest.spyOn(window.history, 'replaceState') + let spy = vi.spyOn(window.history, 'replaceState') createWebHistory('custom#other') expect(spy).toHaveBeenCalledWith( expect.anything(), @@ -186,7 +196,7 @@ describe('History HTMl5', () => { it('works with #! and a host with initial location', () => { dom.reconfigure({ url: 'https://esm.dev/#!/foo' }) - let spy = jest.spyOn(window.history, 'replaceState') + let spy = vi.spyOn(window.history, 'replaceState') createWebHistory('/#!') expect(spy).toHaveBeenCalledWith( expect.anything(), diff --git a/packages/router/__tests__/history/memory.spec.ts b/packages/router/__tests__/history/memory.spec.ts index a1fab2351..b2de91e6d 100644 --- a/packages/router/__tests__/history/memory.spec.ts +++ b/packages/router/__tests__/history/memory.spec.ts @@ -1,5 +1,6 @@ import { createMemoryHistory } from '../../src/history/memory' import { START, HistoryLocation } from '../../src/history/common' +import { vi, describe, expect, it } from 'vitest' const loc: HistoryLocation = '/foo' @@ -26,7 +27,7 @@ describe('Memory history', () => { it('does not trigger listeners with push', () => { const history = createMemoryHistory() - const spy = jest.fn() + const spy = vi.fn() history.listen(spy) history.push(loc) expect(spy).not.toHaveBeenCalled() @@ -34,7 +35,7 @@ describe('Memory history', () => { it('does not trigger listeners with replace', () => { const history = createMemoryHistory() - const spy = jest.fn() + const spy = vi.fn() history.listen(spy) history.replace(loc) expect(spy).not.toHaveBeenCalled() @@ -50,6 +51,16 @@ describe('Memory history', () => { expect(history.location).toEqual(START) }) + it('stores a state', () => { + const history = createMemoryHistory() + history.push(loc, { foo: 'bar' }) + expect(history.state).toEqual({ foo: 'bar' }) + history.push(loc, { foo: 'baz' }) + expect(history.state).toEqual({ foo: 'baz' }) + history.go(-1) + expect(history.state).toEqual({ foo: 'bar' }) + }) + it('does nothing with back if queue contains only one element', () => { const history = createMemoryHistory() history.go(-1) @@ -91,7 +102,7 @@ describe('Memory history', () => { it('can listen to navigations', () => { const history = createMemoryHistory() - const spy = jest.fn() + const spy = vi.fn() history.listen(spy) history.push(loc) history.go(-1) @@ -112,8 +123,8 @@ describe('Memory history', () => { it('can stop listening to navigation', () => { const history = createMemoryHistory() - const spy = jest.fn() - const spy2 = jest.fn() + const spy = vi.fn() + const spy2 = vi.fn() // remove right away history.listen(spy)() const remove = history.listen(spy2) @@ -129,8 +140,8 @@ describe('Memory history', () => { it('removing the same listener is a noop', () => { const history = createMemoryHistory() - const spy = jest.fn() - const spy2 = jest.fn() + const spy = vi.fn() + const spy2 = vi.fn() const rem = history.listen(spy) const rem2 = history.listen(spy2) rem() @@ -149,7 +160,7 @@ describe('Memory history', () => { it('removes all listeners with destroy', () => { const history = createMemoryHistory() history.push('/other') - const spy = jest.fn() + const spy = vi.fn() history.listen(spy) history.destroy() history.push('/2') @@ -177,7 +188,7 @@ describe('Memory history', () => { it('can avoid listeners with back and forward', () => { const history = createMemoryHistory() - const spy = jest.fn() + const spy = vi.fn() history.listen(spy) history.push(loc) history.go(-1, false) diff --git a/packages/router/__tests__/initialNavigation.spec.ts b/packages/router/__tests__/initialNavigation.spec.ts index 04ee5cbaa..c30d7fd34 100644 --- a/packages/router/__tests__/initialNavigation.spec.ts +++ b/packages/router/__tests__/initialNavigation.spec.ts @@ -2,10 +2,11 @@ import { JSDOM } from 'jsdom' import { createRouter, createWebHistory } from '../src' import { createDom, components, nextNavigation } from './utils' import { RouteRecordRaw } from '../src/types' +import { describe, expect, it, beforeAll, vi, afterAll } from 'vitest' // override the value of isBrowser because the variable is created before JSDOM // is created -jest.mock('../src/utils/env', () => ({ +vi.mock('../src/utils/env', () => ({ isBrowser: true, })) diff --git a/packages/router/__tests__/isReady.spec.ts b/packages/router/__tests__/isReady.spec.ts index cad258a00..fb559e7e5 100644 --- a/packages/router/__tests__/isReady.spec.ts +++ b/packages/router/__tests__/isReady.spec.ts @@ -1,6 +1,7 @@ import { createMemoryHistory, createRouter } from '../src' import { components } from './utils' import { RouteRecordRaw } from '../src/types' +import { vi, describe, expect, it } from 'vitest' // generic component because we are not displaying anything so it doesn't matter const component = components.Home @@ -49,7 +50,7 @@ describe('isReady', () => { it('rejects when an error is thrown in a navigation guard', async () => { const router = newRouter() - const errorSpy = jest.fn() + const errorSpy = vi.fn() const error = new Error('failed') router.onError(errorSpy) const remove = router.beforeEach(async () => { @@ -75,7 +76,7 @@ describe('isReady', () => { it('rejects a cancelled navigation', async () => { const router = newRouter() - const errorSpy = jest.fn() + const errorSpy = vi.fn() router.onError(errorSpy) const remove = router.beforeEach(() => false) router.push('/foo').catch(() => {}) @@ -102,7 +103,7 @@ describe('isReady', () => { it('rejects failed lazy loading', async () => { const router = newRouter() - const errorSpy = jest.fn() + const errorSpy = vi.fn() router.onError(errorSpy) router.push('/fail-lazy').catch(() => {}) await expect(router.isReady()).rejects.toEqual(expect.any(Error)) diff --git a/packages/router/__tests__/lazyLoading.spec.ts b/packages/router/__tests__/lazyLoading.spec.ts index 09e97b178..1a8210937 100644 --- a/packages/router/__tests__/lazyLoading.spec.ts +++ b/packages/router/__tests__/lazyLoading.spec.ts @@ -4,7 +4,16 @@ import { RouterOptions } from '../src/router' import { RouteComponent } from '../src/types' import { ticks } from './utils' import { FunctionalComponent, h } from 'vue' -import { mockWarn } from 'jest-mock-warn' +import { mockWarn } from './vitest-mock-warn' +import { + vi, + describe, + expect, + it, + beforeEach, + MockInstance, + afterEach, +} from 'vitest' function newRouter(options: Partial