6 | 7 | 8 | 9 | 10 |
11 | 12 | Count beforeEach:
13 | Count beforeResolve:
14 | Count afterEach:
15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import './vue' 2 | import { VueRouter, RouterLink, RouterView, START_LOCATION, NavigationFailureType, isNavigationFailure } from './router' 3 | 4 | export default VueRouter 5 | export { RouterView, RouterLink, START_LOCATION, NavigationFailureType, isNavigationFailure } 6 | 7 | export type { 8 | RouterMode, 9 | RouteMeta, 10 | RawLocation, 11 | RedirectOption, 12 | RouterOptions, 13 | RouteConfig, 14 | RouteRecord, 15 | RouteRecordPublic, 16 | Location, 17 | Route, 18 | NavigationGuard, 19 | NavigationGuardNext, 20 | NavigationFailure 21 | } from './router' 22 | 23 | import './composables' 24 | -------------------------------------------------------------------------------- /docs/.vuepress/public/images/vueschool/vs-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/multi-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ← Examples index 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | popstate count: 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /.github/workflows/release-tag.yml: -------------------------------------------------------------------------------- 1 | on: 2 | push: 3 | tags: 4 | - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 5 | 6 | name: Create Release 7 | 8 | jobs: 9 | build: 10 | name: Create Release 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@master 15 | - name: Create Release for Tag 16 | id: release_tag 17 | uses: yyx990803/release-tag@master 18 | env: 19 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 20 | with: 21 | tag_name: ${{ github.ref }} 22 | body: | 23 | Please refer to [CHANGELOG.md](https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md) for details. 24 | -------------------------------------------------------------------------------- /docs-gitbook/de/api/component-injections.md: -------------------------------------------------------------------------------- 1 | # Injektion von Komponenten 2 | 3 | ### Injizierte Eigenschaften 4 | 5 | Die folgenden Eigenschaften werden in jede Child-Komponente injiziert, wenn man die Router-Instanz in die Root-Instanz der App als `router:`-Option übergibt. 6 | 7 | - #### $router 8 | 9 | Die Router-Instanz. 10 | 11 | - #### $route 12 | 13 | Die aktuell aktive [Route](route-object.md). Diese Eigenschaft ist schreibgeschützt und ihre Eigenschaften sind unveränderbar - aber sie kann überwacht werden. 14 | 15 | ### Aktivierte Optionen 16 | 17 | - **beforeRouteEnter** 18 | - **beforeRouteLeave** 19 | 20 | Siehe [Guards in Komponenten Komponentenschutz](../advanced/navigation-guards.md#guards-in-komponenten). 21 | -------------------------------------------------------------------------------- /docs-gitbook/es/api/component-injections.md: -------------------------------------------------------------------------------- 1 | # Inyección en componentes 2 | 3 | ### Propiedades inyectadas 4 | 5 | Estas propiedades son inyectadas dentro de cada componente hijo pasando la instancia del `router` a la instancia principal como la opción `router`. 6 | 7 | - #### $router 8 | 9 | La instancia del `router`. 10 | 11 | - #### $route 12 | 13 | El objeto [Route activo](route-object.md). Esta propiedad es de solo lectura y sus propiedades son inmutables, pero puede ser observada. 14 | 15 | ### Opciones habilitadas 16 | 17 | - **beforeRouteEnter** 18 | - **beforeRouteUpdate** (agregado en 2.2) 19 | - **beforeRouteLeave** 20 | 21 | Más información en [guardias en componentes](../advanced/navigation-guards.md#incomponent-guards). 22 | -------------------------------------------------------------------------------- /docs-gitbook/fr/api/component-injections.md: -------------------------------------------------------------------------------- 1 | # Injections de composant 2 | 3 | ### Propriétés injectées 4 | 5 | Ces propriétés sont injectées dans chacun des composants enfants, en passant l'instance du routeur à l'application racine de Vue en tant qu'option `router`. 6 | 7 | - #### $router 8 | 9 | L'instance du routeur. 10 | 11 | - #### $route 12 | 13 | La [Route](route-object.md) actuellement active. C'est une propriété en lecture seule et ses propriétés sont immutables, mais elles restent malgré tout observables. 14 | 15 | ### Options activées 16 | 17 | - **beforeRouteEnter** 18 | - **beforeRouteUpdate** (ajouté en 2.2) 19 | - **beforeRouteLeave** 20 | 21 | Voir l'[interception par composant](../advanced/navigation-guards.md#securisation-par-composant). 22 | -------------------------------------------------------------------------------- /vetur/tags.json: -------------------------------------------------------------------------------- 1 | { 2 | "router-view": { 3 | "attributes": ["name"], 4 | "description": "Component that renders the matched component for the current location. Components rendered by `
home
' }
8 |
9 | const router = new VueRouter({
10 | mode: 'history',
11 | base: __dirname,
12 | routes: [
13 | { path: '/', component: Home },
14 | { path: '/post/:id', component: Post }
15 | ]
16 | })
17 |
18 | new Vue({
19 | router,
20 | template: `
21 |
22 |
31 | `
32 | }).$mount('#app')
33 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/HomeSponsorsGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
20 |
44 |
--------------------------------------------------------------------------------
/types/test/meta.ts:
--------------------------------------------------------------------------------
1 | import VueRouter from '../index'
2 |
3 | const component = { template: 'Data Fetching
23 |-
24 |
/
25 | /post/1
26 | /post/2
27 | /post/3
28 |
home
' }
4 |
5 | declare module '../index' {
6 | export interface RouteMeta {
7 | requiresAuth?: boolean
8 | nested: { foo: string }
9 | }
10 | }
11 |
12 | const router = new VueRouter({
13 | routes: [
14 | {
15 | path: '/',
16 | component,
17 | meta: {
18 | requiresAuth: true,
19 | // still allowed
20 | other: true,
21 | nested: {
22 | foo: 'bar'
23 | }
24 | }
25 | },
26 | {
27 | path: '/foo',
28 | component,
29 | // @ts-expect-error
30 | meta: {}
31 | }
32 | ]
33 | })
34 |
35 | router.beforeEach(to => {
36 | // should pass
37 | if (to.meta!.requiresAuth === true) {
38 | }
39 | // still pass because any
40 | if (to.meta!.lol === true) {
41 | }
42 | // @ts-expect-error: nested will never be true
43 | if (to.meta!.nested === true) {
44 | }
45 | })
46 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /logo.png
4 | actionText: Get Started →
5 | actionLink: /installation.html
6 | footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote
7 | ---
8 |
9 | Vue Router is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:
10 |
11 | - Nested route/view mapping
12 | - Modular, component-based router configuration
13 | - Route params, query, wildcards
14 | - View transition effects powered by Vue.js' transition system
15 | - Fine-grained navigation control
16 | - Links with automatic active CSS classes
17 | - HTML5 history mode or hash mode, with auto-fallback in IE9
18 | - Customizable Scroll Behavior
19 |
20 | [Get started](./guide/) or play with the [examples](https://github.com/vuejs/vue-router/tree/dev/examples) (see [`README.md`](https://github.com/vuejs/vue-router/) to run them).
21 |
22 | Home
' }
7 | const Foo = () =>
8 | new Promise(resolve => {
9 | setTimeout(() =>
10 | resolve({
11 | template: `This is Foo
`
12 | })
13 | , 10)
14 | })
15 |
16 | const router = new VueRouter({
17 | mode: 'history',
18 | base: __dirname,
19 | routes: [
20 | { path: '/', component: Home },
21 | // Just use them normally in the route config
22 | { path: '/async', component: Foo }
23 | ]
24 | })
25 |
26 | router.onReady(() => {
27 | router.push('/async')
28 | })
29 |
30 | document.getElementById('load-button').addEventListener('click', (event) => {
31 | new Vue({
32 | router,
33 | template: `
34 |
35 |
38 | `
39 | }).$mount('#app')
40 | event.target.remove()
41 | })
42 |
--------------------------------------------------------------------------------
/scripts/verifyCommitMsg.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk') // eslint-disable-line
2 | const msgPath = process.env.GIT_PARAMS
3 | const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
4 |
5 | const commitRE = /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?$)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50})/
6 |
7 | if (!commitRE.test(msg)) {
8 | console.log()
9 | console.error(
10 | ` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
11 | chalk.red(` Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
12 | ` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
13 | ` ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
14 | chalk.red(` See .github/COMMIT_CONVENTION.md for more details.\n`) +
15 | chalk.red(` You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
16 | )
17 | process.exit(1)
18 | }
19 |
--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const rewrite = require('express-urlrewrite')
3 | const webpack = require('webpack')
4 | const webpackDevMiddleware = require('webpack-dev-middleware')
5 | const WebpackConfig = require('./webpack.config')
6 |
7 | const app = express()
8 |
9 | app.use(
10 | webpackDevMiddleware(webpack(WebpackConfig), {
11 | publicPath: '/__build__/',
12 | stats: {
13 | colors: true,
14 | chunks: false
15 | }
16 | })
17 | )
18 |
19 | const fs = require('fs')
20 | const path = require('path')
21 |
22 | fs.readdirSync(__dirname).forEach(file => {
23 | if (fs.statSync(path.join(__dirname, file)).isDirectory()) {
24 | app.use(rewrite('/' + file + '/*', '/' + file + '/index.html'))
25 | }
26 | })
27 |
28 | app.use(express.static(__dirname))
29 |
30 | const host = process.env.HOST || 'localhost'
31 | const port = process.env.PORT || 8080
32 | module.exports = app.listen(port, host, () => {
33 | console.log(`Server listening on http://${host}:${port}, Ctrl+C to stop`)
34 | })
35 |
--------------------------------------------------------------------------------
/docs/zh/guide/essentials/named-routes.md:
--------------------------------------------------------------------------------
1 | # 命名路由
2 |
3 |
4 |
5 | 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 `routes` 配置中给某个路由设置名称。
6 |
7 | ```js
8 | const router = new VueRouter({
9 | routes: [
10 | {
11 | path: '/user/:userId',
12 | name: 'user',
13 | component: User
14 | }
15 | ]
16 | })
17 | ```
18 |
19 | 要链接到一个命名路由，可以给 `router-link` 的 `to` 属性传一个对象：
20 |
21 | ```html
22 | Async
36 |
3 |
24 |
25 |
26 |
42 |
--------------------------------------------------------------------------------
/docs-gitbook/ru/essentials/named-routes.md:
--------------------------------------------------------------------------------
1 | # Именованные пути
2 |
3 | Зачастую, при создании ссылок и вызове навигационных методов, удобно ссылаться на путь по его имени. Установить имя пути можно в опциях `routes` при создании экземпляра Router'а:
4 |
5 | ``` js
6 | const router = new VueRouter({
7 | routes: [
8 | {
9 | path: '/user/:userId',
10 | name: 'user',
11 | component: User
12 | }
13 | ]
14 | })
15 | ```
16 |
17 | Чтобы создать ссылку на именованный маршрут, вы можете передать объект в компонент `router-link` используя входной параметр `to`:
18 |
19 | ``` html
20 | Auth Flow
4 |-
5 |
-
6 |
Log out 7 |Log in 8 |
9 | -
10 |
About 11 |
12 | -
13 |
Dashboard 14 | (authenticated) 15 |
16 |
You are logged {{ loggedIn ? 'in' : 'out' }}
22 | 23 |This is Home
' }
7 | const Foo = { template: 'This is Foo
' }
8 | const Bar = { template: 'This is Bar {{ $route.params.id }}
' }
9 |
10 | const router = new VueRouter({
11 | mode: 'history',
12 | base: __dirname,
13 | routes: [
14 | { path: '/', name: 'home', component: Home },
15 | { path: '/foo', name: 'foo', component: Foo },
16 | { path: '/bar/:id', name: 'bar', component: Bar }
17 | ]
18 | })
19 |
20 | new Vue({
21 | router,
22 | template: `
23 |
24 |
33 | `
34 | }).$mount('#app')
35 |
--------------------------------------------------------------------------------
/docs/.vuepress/public/images/vueschool/vs-iso.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/docs/kr/installation.md:
--------------------------------------------------------------------------------
1 | # 설치
2 |
3 | ### 직접 다운로드 / CDN
4 |
5 | [https://unpkg.com/vue-router@3/dist/vue-router.js](https://unpkg.com/vue-router@3/dist/vue-router.js)
6 |
7 |
8 | [Unpkg.com](https://unpkg.com)은 NPM 기반 CDN 링크를 제공합니다. 위의 링크는 항상 NPM의 최신 릴리스를 가리킵니다. `https://unpkg.com/vue-router@3.0.0/dist/vue-router.js`와 같이 URL을 통해 특정 버전 / 태그를 사용할 수도 있습니다.
9 |
10 |
11 | Vue 다음에 `vue-router`를 포함하면 자동으로 설치됩니다.
12 |
13 | ``` html
14 |
15 |
16 | ```
17 |
18 | ### NPM
19 |
20 | ``` bash
21 | npm install vue-router
22 | ```
23 |
24 | 모듈 시스템에서 사용하면 `Vue.use()`를 통해 명시적으로 라우터를 추가해야합니다.
25 |
26 | ``` js
27 | import Vue from 'vue'
28 | import VueRouter from 'vue-router'
29 |
30 | Vue.use(VueRouter)
31 | ```
32 |
33 | 전역 스크립트 태그를 사용할 때는 이 작업을 하지 않아도 됩니다.
34 |
35 | ### 개발용 빌드
36 |
37 | 최신 dev 빌드를 사용하고 싶은 경우 GitHub에서 직접 복제하고 `vue-router`를 직접 빌드 해야 합니다.
38 |
39 | ``` bash
40 | git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
41 | cd node_modules/vue-router
42 | npm install
43 | npm run build
44 | ```
45 |
--------------------------------------------------------------------------------
/docs-gitbook/kr/installation.md:
--------------------------------------------------------------------------------
1 | # 설치
2 |
3 | ### 직접 다운로드 / CDN
4 |
5 | [https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)
6 |
7 |
8 | [Unpkg.com](https://unpkg.com)은 NPM 기반 CDN 링크를 제공합니다. 위의 링크는 항상 NPM의 최신 릴리스를 가리킵니다. `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`와 같이 URL을 통해 특정 버전 / 태그를 사용할 수도 있습니다.
9 |
10 |
11 | Vue 다음에 `vue-router`를 포함하면 자동으로 설치됩니다.
12 |
13 | ``` html
14 |
15 |
16 | ```
17 |
18 | ### NPM
19 |
20 | ``` bash
21 | npm install vue-router
22 | ```
23 |
24 | 모듈 시스템에서 사용하면 `Vue.use()`를 통해 명시적으로 라우터를 추가해야합니다.
25 |
26 | ``` js
27 | import Vue from 'vue'
28 | import VueRouter from 'vue-router'
29 |
30 | Vue.use(VueRouter)
31 | ```
32 |
33 | 전역 스크립트 태그를 사용할 때는 이 작업을 하지 않아도 됩니다.
34 |
35 | ### 개발용 빌드
36 |
37 | 최신 dev 빌드를 사용하고 싶은 경우 GitHub에서 직접 복제하고 `vue-router`를 직접 빌드 해야 합니다.
38 |
39 | ``` bash
40 | git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
41 | cd node_modules/vue-router
42 | npm install
43 | npm run build
44 | ```
45 |
--------------------------------------------------------------------------------
/docs-gitbook/de/essentials/named-views.md:
--------------------------------------------------------------------------------
1 | # Benannte Views
2 |
3 | Manchmal muss man mehrere Views zur selben Zeit darstellen, anstatt sie zu verschachteln. Zum Beispiel bei einem Layout mit Hauptteil und Seitenleiste. Hier sind benannte Views nützlich. Anstelle eines einzigen Outlets für die View-Darstellung gibt es mehrere, die Namen tragen können. Ein `router-view` ohne Namen heißt standardmäßig `default`.
4 |
5 | ``` html
6 | Named Routes
25 |Current route name: {{ $route.name }}
26 |-
27 |
home
28 | foo
29 | bar
30 |
3 |
14 |
15 |
16 |
40 |
41 |
46 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2013-present Evan You
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/fr/guide/essentials/named-routes.md:
--------------------------------------------------------------------------------
1 | # Routes nommées
2 |
3 | Parfois il est plus pratique d'identifier une route avec un nom, tout particulièrement quand on souhaite attacher cette route ou exécuter des actions de navigation. Vous pouvez donner un nom à une route dans les options `routes` pendant la création de l'instance du routeur :
4 |
5 | ``` js
6 | const router = new VueRouter({
7 | routes: [
8 | {
9 | path: '/utilisateur/:userId',
10 | name: 'user',
11 | component: User
12 | }
13 | ]
14 | })
15 | ```
16 |
17 | Pour attacher une route nommée, vous pouvez passer un objet à la prop `to` du composant `router-link` :
18 |
19 | ``` html
20 | Login
4 |5 | You need to login first. 6 |
7 | 13 |
7 | {{ $route.fullPath }}
8 |
9 | `
10 | }
11 |
12 | Vue.use(VueRouter)
13 |
14 | const router = new VueRouter({
15 | routes: [
16 | { path: '/', component }, { path: '/foo', component }
17 | ]
18 | })
19 |
20 | window.router = router
21 |
22 | router.beforeEach((to, from, next) => {
23 | console.log('from', from.fullPath)
24 | console.log('going to', to.fullPath)
25 | if (to.query.wait) {
26 | setTimeout(() => next(), 100)
27 | } else if (to.query.redirect) {
28 | next(to.query.redirect)
29 | } else if (to.query.abort) {
30 | next(false)
31 | } else {
32 | next()
33 | }
34 | })
35 |
36 | new Vue({
37 | el: '#app',
38 | router
39 | })
40 |
41 | // 4 NAVIGATION ERROR CASES :
42 |
43 | // navigation duplicated
44 | // router.push('/foo')
45 | // router.push('/foo')
46 |
47 | // navigation cancelled
48 | // router.push('/foo?wait=y')
49 | // router.push('/')
50 |
51 | // navigation redirected
52 | // router.push('/foo?redirect=/')
53 |
54 | // navigation aborted
55 | // router.push('/foo?abort=y')
56 |
--------------------------------------------------------------------------------
/test/e2e/specs/nested-router.js:
--------------------------------------------------------------------------------
1 | const bsStatus = require('../browserstack-send-status')
2 |
3 | module.exports = {
4 | ...bsStatus(),
5 |
6 | '@tags': ['history'],
7 |
8 | basic: function (browser) {
9 | browser
10 | .url('http://localhost:8080/nested-router/')
11 | .waitForElementVisible('#app', 1000)
12 | .assert.count('li a', 3)
13 |
14 | .click('li:nth-child(1) a')
15 | .assert.urlEquals('http://localhost:8080/nested-router/nested-router')
16 | .assert.containsText('.child', 'Child router path: /')
17 | .assert.count('li a', 5)
18 |
19 | .click('.child li:nth-child(1) a')
20 | .assert.containsText('.child', 'Child router path: /foo')
21 | .assert.containsText('.child .foo', 'foo')
22 |
23 | .click('.child li:nth-child(2) a')
24 | .assert.containsText('.child', 'Child router path: /bar')
25 | .assert.containsText('.child .bar', 'bar')
26 |
27 | .click('li:nth-child(2) a')
28 | .assert.urlEquals('http://localhost:8080/nested-router/foo')
29 | .assert.elementNotPresent('.child')
30 | .assert.containsText('#app', 'foo')
31 | .assert.count('li a', 3)
32 | .end()
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/test/e2e/specs/data-fetching.js:
--------------------------------------------------------------------------------
1 | const bsStatus = require('../browserstack-send-status')
2 |
3 | module.exports = {
4 | ...bsStatus(),
5 |
6 | '@tags': [],
7 |
8 | 'data fetching': function (browser) {
9 | browser
10 | .url('http://localhost:8080/data-fetching/')
11 | .waitForElementVisible('#app', 1000)
12 | .assert.count('li a', 4)
13 | .assert.containsText('.view', 'home')
14 |
15 | .click('li:nth-child(2) a')
16 | .waitForElementNotPresent('.loading', 500)
17 | .assert.containsText('.post h2', 'sunt aut facere')
18 | .assert.containsText('.post p', 'quia et suscipit')
19 |
20 | .click('li:nth-child(3) a')
21 | .waitForElementNotPresent('.loading', 500)
22 | .assert.containsText('.post h2', 'qui est esse')
23 | .assert.containsText('.post p', 'est rerum tempore')
24 |
25 | .click('li:nth-child(4) a')
26 | .waitForElementNotPresent('.loading', 500)
27 | .assert.elementNotPresent('.content')
28 | .assert.containsText('.error', 'Post not found')
29 |
30 | .click('li:nth-child(1) a')
31 | .assert.elementNotPresent('.post')
32 | .assert.containsText('.view', 'home')
33 | .end()
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/examples/auth-flow/auth.js:
--------------------------------------------------------------------------------
1 | /* globals localStorage */
2 |
3 | export default {
4 | login (email, pass, cb) {
5 | cb = arguments[arguments.length - 1]
6 | if (localStorage.token) {
7 | if (cb) cb(true)
8 | this.onChange(true)
9 | return
10 | }
11 | pretendRequest(email, pass, (res) => {
12 | if (res.authenticated) {
13 | localStorage.token = res.token
14 | if (cb) cb(true)
15 | this.onChange(true)
16 | } else {
17 | if (cb) cb(false)
18 | this.onChange(false)
19 | }
20 | })
21 | },
22 |
23 | getToken () {
24 | return localStorage.token
25 | },
26 |
27 | logout (cb) {
28 | delete localStorage.token
29 | if (cb) cb()
30 | this.onChange(false)
31 | },
32 |
33 | loggedIn () {
34 | return !!localStorage.token
35 | },
36 |
37 | onChange () {}
38 | }
39 |
40 | function pretendRequest (email, pass, cb) {
41 | setTimeout(() => {
42 | if (email === 'joe@example.com' && pass === 'password1') {
43 | cb({
44 | authenticated: true,
45 | token: Math.random().toString(36).substring(7)
46 | })
47 | } else {
48 | cb({ authenticated: false })
49 | }
50 | }, 0)
51 | }
52 |
--------------------------------------------------------------------------------
/src/util/params.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { warn } from './warn'
4 | import Regexp from 'path-to-regexp'
5 |
6 | // $flow-disable-line
7 | const regexpCompileCache: {
8 | [key: string]: Function
9 | } = Object.create(null)
10 |
11 | export function fillParams (
12 | path: string,
13 | params: ?Object,
14 | routeMsg: string
15 | ): string {
16 | params = params || {}
17 | try {
18 | const filler =
19 | regexpCompileCache[path] ||
20 | (regexpCompileCache[path] = Regexp.compile(path))
21 |
22 | // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
23 | // and fix #3106 so that you can work with location descriptor object having params.pathMatch equal to empty string
24 | if (typeof params.pathMatch === 'string') params[0] = params.pathMatch
25 |
26 | return filler(params, { pretty: true })
27 | } catch (e) {
28 | if (process.env.NODE_ENV !== 'production') {
29 | // Fix #3072 no warn if `pathMatch` is string
30 | warn(typeof params.pathMatch === 'string', `missing param for ${routeMsg}: ${e.message}`)
31 | }
32 | return ''
33 | } finally {
34 | // delete the 0 if it was added
35 | delete params[0]
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/docs-gitbook/es/api/router-view.md:
--------------------------------------------------------------------------------
1 | # `Component: home
' }
11 | const Foo = { template: 'Component: foo
' }
12 | const Bar = { template: 'Component: bar
' }
13 |
14 | // 3. Create the router
15 | const router = new VueRouter({
16 | mode: 'history',
17 | base: __dirname,
18 | routes: [
19 | { path: '/', component: Home },
20 | { path: '/foo', component: Foo },
21 | { path: '/bar', component: Bar }
22 | ]
23 | })
24 |
25 | // 4. Create extended base Vue with router injected here (all
26 | // children should inherit the same router).
27 | const BaseVue = Vue.extend({ router })
28 |
29 | // Discrete components means that a new Vue instance will be created
30 | // and bound on multiple *independent* nodes (eg. one Vue instance
31 | // per node); but the router should act as a singleton and keep all
32 | // instances in sync.
33 | Array.prototype.forEach.call(document.querySelectorAll('.app'), (node) => {
34 | new BaseVue({
35 | el: node
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/examples/named-views/app.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 |
4 | Vue.use(VueRouter)
5 |
6 | const Foo = { template: 'foo
' }
7 | const Bar = { template: 'bar
' }
8 | const Baz = { template: 'baz
' }
9 |
10 | const router = new VueRouter({
11 | mode: 'history',
12 | base: __dirname,
13 | routes: [
14 | { path: '/',
15 | // a single route can define multiple named components
16 | // which will be rendered into
38 |
47 | `
48 | }).$mount('#app')
49 |
--------------------------------------------------------------------------------
/docs-gitbook/ja/advanced/meta.md:
--------------------------------------------------------------------------------
1 | # ルートメタフィールド
2 |
3 | ルートの定義をする際に `meta` フィールドを含めることができます。
4 |
5 | ``` js
6 | const router = new VueRouter({
7 | routes: [
8 | {
9 | path: '/foo',
10 | component: Foo,
11 | children: [
12 | {
13 | path: 'bar',
14 | component: Bar,
15 | // メタフィールド
16 | meta: { requiresAuth: true }
17 | }
18 | ]
19 | }
20 | ]
21 | })
22 | ```
23 |
24 | ではどのように `meta` フィールドにアクセスしましょう？
25 |
26 | まず、 `routes` 設定の中の各ルートオブジェクトは**ルートレコード**と呼ばれます。ルートレコードはネストされているかもしれません。したがって、ルートがマッチした時に、潜在的には 1 つ以上のルートレコードがマッチされる可能性があります。
27 |
28 | 例えば上記のルート設定で、 `/foo/bar` という URL は親のルートレコードにも子のルートレコードにもマッチします。
29 |
30 | ルートにマッチした全てのルートレコードは `$route.matched` 配列として `$route` オブジェクト上で (また、ナビゲーションガード上のルートオブジェクトでも) アクセス可能になります。
31 |
32 | メタフィールドをグローバルナビゲーションガードで確認するユースケースの例:
33 |
34 | ``` js
35 | router.beforeEach((to, from, next) => {
36 | if (to.matched.some(record => record.meta.requiresAuth)) {
37 | // このルートはログインされているかどうか認証が必要です。
38 | // もしされていないならば、ログインページにリダイレクトします。
39 | if (!auth.loggedIn()) {
40 | next({
41 | path: '/login',
42 | query: { redirect: to.fullPath }
43 | })
44 | } else {
45 | next()
46 | }
47 | } else {
48 | next() // next() を常に呼び出すようにしてください!
49 | }
50 | })
51 |
52 | ```
53 |
--------------------------------------------------------------------------------
/docs/guide/essentials/named-routes.md:
--------------------------------------------------------------------------------
1 | # Named Routes
2 |
3 |
4 |
5 | Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations. You can give a route a name in the `routes` options while creating the Router instance:
6 |
7 | ```js
8 | const router = new VueRouter({
9 | routes: [
10 | {
11 | path: '/user/:userId',
12 | name: 'user',
13 | component: User
14 | }
15 | ]
16 | })
17 | ```
18 |
19 | To link to a named route, you can pass an object to the `router-link` component's `to` prop:
20 |
21 | ```html
22 | Named Views
39 |-
40 |
/
41 | /other
42 |
id: {{ $route.params.id }}, type: {{ $route.params.type }}
`
8 | }
9 |
10 | const Logs = {
11 | template: `
12 |
13 | {{ to.params.type }}
15 |
17 | `,
18 | data () {
19 | return {
20 | to: {
21 | name: 'items.logs.type',
22 | params: { type: 'info' }
23 | }
24 | }
25 | }
26 | }
27 |
28 | const router = new VueRouter({
29 | mode: 'history',
30 | base: __dirname,
31 | routes: [
32 | {
33 | path: '/items/:id/logs',
34 | component: Logs,
35 | children: [
36 | {
37 | path: ':type',
38 | name: 'items.logs.type',
39 | component: Log
40 | }
41 | ]
42 | }
43 | ]
44 | })
45 |
46 | new Vue({
47 | router,
48 | template: `
49 | {{ to.params }}
14 |
50 |
57 | `
58 | }).$mount('#app')
59 |
--------------------------------------------------------------------------------
/docs-gitbook/es/installation.md:
--------------------------------------------------------------------------------
1 | # Instalación
2 |
3 | ### Descarga directa / CDN
4 |
5 | [https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)
6 |
7 |
8 | [Unpkg.com](https://unpkg.com) provee enlaces a CDN basadas en NPM. El enlace anterior siempre apuntará a la última versión en NPM. También puedes usar una versión/etiqueta específica a través de URLs como`https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`.
9 |
10 |
11 | Incluye `vue-router` luego de Vue y se instalará automáticamente:
12 |
13 | ``` html
14 |
15 |
16 | ```
17 |
18 | ### NPM
19 |
20 | ``` bash
21 | npm install vue-router
22 | ```
23 |
24 | Cuando lo utilices con un sistema de empaquetamiento de módulos, debes instalarlo explícitamente a través de `Vue.use()`:
25 |
26 | ``` js
27 | import Vue from 'vue'
28 | import VueRouter from 'vue-router'
29 |
30 | Vue.use(VueRouter)
31 | ```
32 |
33 | No necesitas hacer esto cuando utilices etiquetas _script_ globales.
34 |
35 | ### Versión de desarrollo
36 |
37 | Debes clonar el repositorio directamente desde GitHub y construir `vue-router` tu mismo si quieres utilizar la última versión de desarrollo.
38 |
39 | ``` bash
40 | git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
41 | cd node_modules/vue-router
42 | npm install
43 | npm run build
44 | ```
45 |
--------------------------------------------------------------------------------
/docs-gitbook/kr/advanced/transitions.md:
--------------------------------------------------------------------------------
1 | # 전환
2 |
3 | `Route params
51 |-
52 |
item #1
53 | item #2
54 |
...
22 |
30 |
40 | `
41 | }).$mount('#app')
42 |
--------------------------------------------------------------------------------
/docs-gitbook/ja/advanced/transitions.md:
--------------------------------------------------------------------------------
1 | # トランジション
2 |
3 | 基本的に `Route props
31 |-
32 |
/
33 | /hello/you
34 | /static
35 | /dynamic/1
36 | /attrs
37 |
...
22 | ...
22 | User {{ $route.params.id }}
'
12 | }
13 | const router = new VueRouter({
14 | routes: [
15 | { path: '/user/:id', component: User }
16 | ]
17 | })
18 | ```
19 |
20 | ** 속성에 의존성 해제**
21 |
22 | ``` js
23 | const User = {
24 | props: ['id'],
25 | template: 'User {{ id }}
'
26 | }
27 | const router = new VueRouter({
28 | routes: [
29 | { path: '/user/:id', component: User, props: true },
30 | ]
31 | })
32 | ```
33 |
34 | 이를 통해 어디서나 컴포넌트를 사용할 수 있으므로 컴포넌트 재사용 및 테스트하기가 더 쉽습니다.
35 |
36 | ### Boolean 모드
37 |
38 | `props`를 `true`로 설정하면 `route.params`가 컴포넌트 `props`로 설정됩니다.
39 |
40 | ### 객체 모드
41 |
42 | `props`가 객체일때 컴포넌트 `props`가 있는 그대로 설정됩니다.
43 | `props`가 정적일 때 유용합니다.
44 |
45 | ``` js
46 | const router = new VueRouter({
47 | routes: [
48 | { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
49 | ]
50 | })
51 | ```
52 |
53 | ### 함수 모드
54 |
55 | `props`를 반환하는 함수를 만들 수 있습니다. 이를 통해 전달인자를 다른 타입으로 캐스팅하고 적정인 값을 라우트 기반 값과 결합됩니다.
56 |
57 | ``` js
58 | const router = new VueRouter({
59 | routes: [
60 | { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
61 | ]
62 | })
63 | ```
64 |
65 | `/search?q=vue`는 `{query: "vue"}`를 `SearchUser` 컴포넌트에 전달합니다.
66 |
67 | 라우트 변경시에만 평가되므로 `props` 함수는 상태를 저장하지 않도록 합니다.
68 | `props`를 정의할 상태가 필요한 경우 래퍼 컴포넌트를 사용하면 상태가 변경될 때마다 응답할 수 있습니다.
69 |
70 | 고급 사용예를 보려면 [예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)를 확인하세요.
71 |
--------------------------------------------------------------------------------
/docs/kr/guide/essentials/passing-props.md:
--------------------------------------------------------------------------------
1 | # 라우트 컴포넌트에 속성 전달
2 |
3 | 컴포넌트에서 `$route`를 사용하면 특정 URL에서만 사용할 수 있는 컴포넌트의 유연성을 제한하는 라우트와 강한 결합을 만듭니다.
4 |
5 | 컴포넌트와 라우터 속성을 분리하려면 다음과 같이 하십시오.
6 |
7 | **$route에 의존성 추가**
8 |
9 | ``` js
10 | const User = {
11 | template: 'User {{ $route.params.id }}
'
12 | }
13 | const router = new VueRouter({
14 | routes: [
15 | { path: '/user/:id', component: User }
16 | ]
17 | })
18 | ```
19 |
20 | **속성에 의존성 해제**
21 |
22 | ``` js
23 | const User = {
24 | props: ['id'],
25 | template: 'User {{ id }}
'
26 | }
27 | const router = new VueRouter({
28 | routes: [
29 | { path: '/user/:id', component: User, props: true },
30 | ]
31 | })
32 | ```
33 |
34 | 이를 통해 어디서나 컴포넌트를 사용할 수 있으므로 컴포넌트 재사용 및 테스트하기가 더 쉽습니다.
35 |
36 | ### Boolean 모드
37 |
38 | `props`를 `true`로 설정하면 `route.params`가 컴포넌트 `props`로 설정됩니다.
39 |
40 | ### 객체 모드
41 |
42 | `props`가 객체일때 컴포넌트 `props`가 있는 그대로 설정됩니다.
43 | `props`가 정적일 때 유용합니다.
44 |
45 | ``` js
46 | const router = new VueRouter({
47 | routes: [
48 | { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
49 | ]
50 | })
51 | ```
52 |
53 | ### 함수 모드
54 |
55 | `props`를 반환하는 함수를 만들 수 있습니다. 이를 통해 전달인자를 다른 타입으로 캐스팅하고 적정인 값을 라우트 기반 값과 결합됩니다.
56 |
57 | ``` js
58 | const router = new VueRouter({
59 | routes: [
60 | { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
61 | ]
62 | })
63 | ```
64 |
65 | `/search?q=vue`는 `{query: "vue"}`를 `SearchUser` 컴포넌트에 전달합니다.
66 |
67 | 라우트 변경시에만 평가되므로 `props` 함수는 상태를 저장하지 않도록 합니다.
68 | `props`를 정의할 상태가 필요한 경우 래퍼 컴포넌트를 사용하면 상태가 변경될 때마다 응답할 수 있습니다.
69 |
70 | 고급 사용예를 보려면 [예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)를 확인하세요.
71 |
--------------------------------------------------------------------------------
/src/util/path.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | export function resolvePath (
4 | relative: string,
5 | base: string,
6 | append?: boolean
7 | ): string {
8 | const firstChar = relative.charAt(0)
9 | if (firstChar === '/') {
10 | return relative
11 | }
12 |
13 | if (firstChar === '?' || firstChar === '#') {
14 | return base + relative
15 | }
16 |
17 | const stack = base.split('/')
18 |
19 | // remove trailing segment if:
20 | // - not appending
21 | // - appending to trailing slash (last segment is empty)
22 | if (!append || !stack[stack.length - 1]) {
23 | stack.pop()
24 | }
25 |
26 | // resolve relative path
27 | const segments = relative.replace(/^\//, '').split('/')
28 | for (let i = 0; i < segments.length; i++) {
29 | const segment = segments[i]
30 | if (segment === '..') {
31 | stack.pop()
32 | } else if (segment !== '.') {
33 | stack.push(segment)
34 | }
35 | }
36 |
37 | // ensure leading slash
38 | if (stack[0] !== '') {
39 | stack.unshift('')
40 | }
41 |
42 | return stack.join('/')
43 | }
44 |
45 | export function parsePath (path: string): {
46 | path: string;
47 | query: string;
48 | hash: string;
49 | } {
50 | let hash = ''
51 | let query = ''
52 |
53 | const hashIndex = path.indexOf('#')
54 | if (hashIndex >= 0) {
55 | hash = path.slice(hashIndex)
56 | path = path.slice(0, hashIndex)
57 | }
58 |
59 | const queryIndex = path.indexOf('?')
60 | if (queryIndex >= 0) {
61 | query = path.slice(queryIndex + 1)
62 | path = path.slice(0, queryIndex)
63 | }
64 |
65 | return {
66 | path,
67 | query,
68 | hash
69 | }
70 | }
71 |
72 | export function cleanPath (path: string): string {
73 | return path.replace(/\/(?:\s*\/)+/g, '/')
74 | }
75 |
--------------------------------------------------------------------------------
/docs-gitbook/de/advanced/meta.md:
--------------------------------------------------------------------------------
1 | # Route Meta-Felder
2 |
3 | In der Route-Definition kann man ein Meta-Feld definieren:
4 |
5 | ``` js
6 | const router = new VueRouter({
7 | routes: [
8 | {
9 | path: '/foo',
10 | component: Foo,
11 | children: [
12 | {
13 | path: 'bar',
14 | component: Bar,
15 | // ein Metafeld
16 | meta: { requiresAuth: true }
17 | }
18 | ]
19 | }
20 | ]
21 | })
22 | ```
23 |
24 | Und wie greifen wir auf das `meta`-Feld zu?
25 |
26 | Zunächst einmal: Wir nennen jedes Route-Objekt in der `routes`-Konfiguration **Route-Record**. Route-Records können verschachtelt sein, weshalb eine URL potentiell zu mehreren Route-Records passen kann.
27 |
28 | Zum Beispiel werden mit der obigen Konfiguration und der URL `/foo/bar` beide - Parent-Record und Child-Record - gematched.
29 |
30 | Alle Route-Records, die auf eine URL zutreffen, sind im `$route`-Objekt und in den Route-Objekten in Navigation-Guards im `$route.matched`-Array zu finden. Deswegen müssen wir mit einer Schleife das `$route.matched` Array durchlaufen, um alle Route-Records auf Metafelder zu prüfen.
31 |
32 | Ein Anwendungsfall ist die Prüfung nach einem Metafeld im globalen Before-Guard:
33 |
34 | ``` js
35 | router.beforeEach((to, from, next) => {
36 | if (to.matched.some(record => record.meta.requiresAuth)) {
37 | // Diese Route benötigt Authentifizierung und prüft,
38 | // ob man eingeloggt ist.
39 | // Wenn nicht, Redirect zur Login-Seite.
40 | if (!auth.loggedIn()) {
41 | next({
42 | path: '/login',
43 | query: { redirect: to.fullPath }
44 | })
45 | } else {
46 | next()
47 | }
48 | } else {
49 | next() // Rufe immer next() auf.
50 | }
51 | })
52 | ```
53 |
--------------------------------------------------------------------------------
/docs/ja/guide/advanced/transitions.md:
--------------------------------------------------------------------------------
1 | # トランジション
2 |
3 |
4 |
5 | 基本的に `...
24 | home
' }
5 | const Foo = { template: 'foo
' }
6 |
7 | const routes = [
8 | { path: '/', component: Home },
9 | { path: '/foo', component: Foo }
10 | ]
11 |
12 | const router = new VueRouter({
13 | mode: 'history',
14 | base: __dirname,
15 | routes
16 | })
17 |
18 | // track number of beforeResolve
19 | const increment = name => {
20 | const counter = document.getElementById(name)
21 | counter.innerHTML++
22 | }
23 |
24 | document.getElementById('beforeEach').innerHTML = 0
25 | router.beforeEach((to, from, next) => {
26 | increment('beforeEach')
27 | next()
28 | })
29 |
30 | document.getElementById('beforeResolve').innerHTML = 0
31 | router.beforeResolve((to, from, next) => {
32 | increment('beforeResolve')
33 | next()
34 | })
35 |
36 | document.getElementById('afterEach').innerHTML = 0
37 | router.afterEach((to, from) => {
38 | increment('afterEach')
39 | })
40 |
41 | Vue.use(VueRouter)
42 |
43 | let vueInstance
44 | const mountEl = document.getElementById('mount')
45 | const unmountEl = document.getElementById('unmount')
46 |
47 | mountEl.addEventListener('click', () => {
48 | vueInstance = new Vue({
49 | router,
50 | template: `
51 |
52 |
59 | `
60 | }).$mount('#app')
61 | })
62 |
63 | unmountEl.addEventListener('click', () => {
64 | vueInstance.$destroy()
65 | vueInstance.$el.innerHTML = ''
66 | })
67 |
--------------------------------------------------------------------------------
/docs/.vuepress/theme/components/CarbonAds.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
28 |
85 |
--------------------------------------------------------------------------------
/examples/discrete-components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 | ← Examples index
10 | Hello "Restart-app"
53 |-
54 |
Go to Home
55 | Go to Foo
56 |
11 |
36 |
12 |
19 | -
13 |
/
14 | /foo
15 | /bar
16 |
20 |
27 | -
21 |
/
22 | /foo
23 | /bar
24 |
28 |
35 | -
29 |
/
30 | /foo
31 | /bar
32 |
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/docs-gitbook/ja/SUMMARY.md:
--------------------------------------------------------------------------------
1 | # vue-router
2 |
3 | > 注意: TypeScript ユーザ向けは、vue-router@3.0+ と vue@2.5+ が必須、逆もまた同様です。
4 |
5 | **[リリースノート](https://github.com/vuejs/vue-router/releases)**
6 |
7 | - [インストール](installation.md)
8 | - 基本的な使い方
9 | - [はじめに](essentials/getting-started.md)
10 | - [動的ルートマッチング](essentials/dynamic-matching.md)
11 | - [ネストされたルート](essentials/nested-routes.md)
12 | - [プログラムによるナビゲーション](essentials/navigation.md)
13 | - [名前付きルート](essentials/named-routes.md)
14 | - [名前付きビュー](essentials/named-views.md)
15 | - [リダイレクトとエイリアス](essentials/redirect-and-alias.md)
16 | - [ルートコンポーネントにプロパティを渡す](essentials/passing-props.md)
17 | - [HTML5 History モード](essentials/history-mode.md)
18 | - 高度な使い方
19 | - [ナビゲーションガード](advanced/navigation-guards.md)
20 | - [ルートメタフィールド](advanced/meta.md)
21 | - [トランジション](advanced/transitions.md)
22 | - [データの取得](advanced/data-fetching.md)
23 | - [スクロールの振る舞い](advanced/scroll-behavior.md)
24 | - [遅延ローディング](advanced/lazy-loading.md)
25 | - API リファレンス
26 | - [ルーターコンストラクタオプション](api/options.md)
27 | - [routes](api/options.md#routes)
28 | - [mode](api/options.md#mode)
29 | - [base](api/options.md#base)
30 | - [linkActiveClass](api/options.md#linkactiveclass)
31 | - [linkExactActiveClass](api/options.md#linkexactactiveclass)
32 | - [scrollBehavior](api/options.md#scrollbehavior)
33 | - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery)
34 | - [fallback](api/options.md#fallback)
35 | - [ルーターインスタンス](api/router-instance.md)
36 | - [Properties](api/router-instance.md#properties)
37 | - [Methods](api/router-instance.md#methods)
38 | - [ルートオブジェクト](api/route-object.md)
39 | - [コンポーネント注入](api/component-injections.md)
40 | - [router-link](api/router-link.md)
41 | - [router-view](api/router-view.md)
42 |
--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const path = require('path')
3 | const VuePlugin = require('vue-loader/lib/plugin')
4 |
5 | module.exports = {
6 | // Expose __dirname to allow automatically setting basename.
7 | context: __dirname,
8 | node: {
9 | __dirname: true
10 | },
11 |
12 | mode: process.env.NODE_ENV || 'development',
13 |
14 | entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
15 | const fullDir = path.join(__dirname, dir)
16 | const entry = path.join(fullDir, 'app.js')
17 | if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
18 | entries[dir] = ['es6-promise/auto', entry]
19 | }
20 |
21 | return entries
22 | }, {}),
23 |
24 | output: {
25 | path: path.join(__dirname, '__build__'),
26 | filename: '[name].js',
27 | chunkFilename: '[id].chunk.js',
28 | publicPath: '/__build__/'
29 | },
30 |
31 | module: {
32 | rules: [
33 | {
34 | test: /\.js$/,
35 | exclude: /node_modules/,
36 | use: 'babel-loader'
37 | },
38 | {
39 | test: /\.vue$/,
40 | use: 'vue-loader'
41 | },
42 | {
43 | test: /\.css$/,
44 | use: ['vue-style-loader', 'css-loader']
45 | }
46 | ]
47 | },
48 |
49 | resolve: {
50 | alias: {
51 | vue: 'vue/dist/vue.esm.js',
52 | 'vue-router': path.join(__dirname, '..', 'src'),
53 | 'vue-router/composables': path.join(__dirname, '..', 'src/composables')
54 | }
55 | },
56 |
57 | optimization: {
58 | splitChunks: {
59 | cacheGroups: {
60 | shared: {
61 | name: 'shared',
62 | chunks: 'initial',
63 | minChunks: 2
64 | }
65 | }
66 | }
67 | },
68 |
69 | plugins: [new VuePlugin()]
70 | }
71 |
--------------------------------------------------------------------------------
/docs-gitbook/de/advanced/transitions.md:
--------------------------------------------------------------------------------
1 | # Transitions (Übergänge)
2 |
3 | Da `...
22 | ...
22 | ...
22 | ...
22 | ...
22 |