Skip to content

Commit 708fb32

Browse files
minor #504 Update Vue docs (pierredup)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- Update Vue docs | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | N/A | License | MIT * Fix typo for event (`vue:mount` instead of `vue:before-mount`) * Add note about history mode when using Vue router Commits ------- 7b5cebb Update Vue docs
2 parents ceb82b2 + 0f7ea4b commit 708fb32

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

src/Vue/Resources/doc/index.rst

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ The event ``vue:before-mount`` is called before a component is mounted on the pa
105105
106106
// Example with Vue Router
107107
const router = VueRouter.createRouter({
108+
history: VueRouter.createWebHashHistory(),
108109
routes: [
109110
/* ... */
110111
],
@@ -113,7 +114,12 @@ The event ``vue:before-mount`` is called before a component is mounted on the pa
113114
app.use(router);
114115
});
115116
116-
The event ``vue:before-mount`` is called when a component has been mounted on the page:
117+
.. note::
118+
When using Vue Router, you can use "hash" or "memory" history mode
119+
to prevent your Vue routes from being served through Symfony controllers.
120+
If you want to use web history mode, see :ref:`Web History mode with Vue Router`
121+
122+
The event ``vue:mount`` is called when a component has been mounted on the page:
117123

118124
.. code-block:: js
119125
@@ -136,6 +142,35 @@ The event ``vue:unmount`` is called when a component has been unmounted on the p
136142
} = event.detail;
137143
});
138144
145+
Web History mode with Vue Router
146+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
147+
148+
To use "web" history mode with Vue Router, a catch-all route will be needed
149+
which should render the same template and Vue component:
150+
151+
.. code-block:: php
152+
153+
#Route('/survey/{path<.+>}')
154+
public function survey($path = ''): Response
155+
{
156+
// render the template
157+
}
158+
159+
This controller will catch any URL that starts with `/survey`. This prefix can then be
160+
used for all the Vue routes:
161+
162+
.. code-block:: js
163+
164+
const router = VueRouter.createRouter({
165+
history: VueRouter.createWebHistory(),
166+
routes: [
167+
{ path: '/survey/list', component: ListSurveys },
168+
{ path: '/survey/create', component: CreateSurvey },
169+
{ path: '/survey/edit/:surveyId', component: EditSurvey },
170+
],
171+
});
172+
173+
app.use(router);
139174
140175
Backward Compatibility promise
141176
------------------------------

0 commit comments

Comments
 (0)