You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/head.md
+13-13
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
-
# Gestion des entêtes
1
+
# Gestion des entêtes (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).*
2
2
3
-
Similaire à l'injection de fichier, la gestion des entêtes suit la même idée : nous pouvons dynamiquement attacher des données au rendu`context`dans le cycle de vie du composant, et interpoler ses données dans le template.
3
+
Similar to asset injection, head management follows the same idea: we can dynamically attach data to the render`context`in a component's lifecycle, and then interpolate those data in `template`.
4
4
5
-
> Dans la version 2.3.2+, vous pouvez directement accéder au contexte SSR du composant via `this.$ssrContext`. Dans les versions plus anciennes, vous devez injecter manuellement le contexte SSR en le passant à la fonction `createApp()`et ainsi l'exposer dans `$options`de l'instance racine — les composants enfants pouvant y accéder via `this.$root.$options.ssrContext`.
5
+
> In version >=2.3.2, you can directly access the SSR context in a component as `this.$ssrContext`. In older versions you'd have to manually inject the SSR context by passing it to `createApp()`and expose it on the root instance's `$options`- child components can then access it via `this.$root.$options.ssrContext`.
6
6
7
-
Nous pouvons écrire un mixin simple pour effectuer la gestion du titre :
7
+
We can write a simple mixin to perform title management:
8
8
9
9
```js
10
10
// title-mixin.js
11
11
12
12
functiongetTitle (vm) {
13
-
//les composants doivent simplement fournir une option `title`
14
-
//pouvant être soit une chaîne de caractères soit une fonction
13
+
//components can simply provide a `title` option
14
+
//which can be either a string or a function
15
15
const { title } =vm.$options
16
16
if (title) {
17
17
returntypeof title ==='function'
@@ -38,13 +38,13 @@ const clientTitleMixin = {
38
38
}
39
39
}
40
40
41
-
//`VUE_ENV` peut être injecté avec `webpack.DefinePlugin`
41
+
// VUE_ENV can be injected with webpack.DefinePlugin
42
42
exportdefaultprocess.env.VUE_ENV==='server'
43
43
? serverTitleMixin
44
44
: clientTitleMixin
45
45
```
46
46
47
-
Maintenant, un composant de route peut être utilisé ainsi pour contrôler le titre du document :
47
+
Now, a route component can make use of this to control the document title:
48
48
49
49
```js
50
50
// Item.vue
@@ -66,7 +66,7 @@ export default {
66
66
}
67
67
```
68
68
69
-
Et passé au moteur de rendu de paquetage dans le template.
69
+
And inside the `template` passed to bundle renderer:
70
70
71
71
```html
72
72
<html>
@@ -79,12 +79,12 @@ Et passé au moteur de rendu de paquetage dans le template.
79
79
</html>
80
80
```
81
81
82
-
**Notes:**
82
+
**Notes:**
83
83
84
-
-Utilisez les doubles moustaches (interpolation de HTML échapé) pour éviter les attaques XSS.
84
+
-Use double-mustache (HTML-escaped interpolation) to avoid XSS attacks.
85
85
86
-
-Vous devriez fournir un titre par défaut quand vous créez l'object `context`au cas ou aucun composant de définisse de titre durant le rendu.
86
+
-You should provide a default title when creating the `context`object in case no component has set a title during render.
87
87
88
88
---
89
89
90
-
En utilisant la même stratégie, vous pouvez facilement étendre votre mixin en une fonction utilitaire générique de gestion des entêtes.
90
+
Using the same strategy, you can easily expand this mixin into a generic head management utility.
0 commit comments