Discussion :

[michael_cassio]

Bonjours,

Je utiltize i18n. C'est un outil (middleware) pour realizer des site Web multilingue.
J'ai installé i18n et ja peux changer entre different langues. La base du texte multilingue est JSON.

Maintenant, j'ai des problemes avec l'integration du vue-router.
Je veux realizer quelque chose comme ca:

domain/fr/home
domain/fr/about

domain/en/home
domain/en/about

Selon un tutoriel, j'ai realizer vue-router comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
import { createRouter, createWebHistory } from "vue-router";
 
import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Projects from "./views/Projects.vue";
import Blog from "./views/Blog.vue";
import Design from "./views/Design.vue";
import Contact from "./views/Contact.vue";
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/:lang",
      component: {
        render(c) {
          return c("router-view");
        },
      },
      children: [
        { path: "/", redirect: "home" },
        { path: "home", name: "home", component: Home },
 
        { path: "projects", name: "Projects", component: Projects },
        { path: "blog", name: "Blog", component: Blog },
        { path: "design", name: "Design", component: Design },
        { path: "about", name: "About", component: About },
        { path: "contact", name: "Projects", component: Contact },
      ],
    },
  ],
});
 
export default router;

En principe, le composant de path: "/: lang" n'existe pas. (Le composant es toujours obligatoire!!) C'est pourquoi j'utilise la fonction render().
Cependant, cela n'est pas reconnu par le système. Où est l'erreur? Merci beaucoup.

michael_cassio

[gwyohm]

hello,

tu appelles quelle URL depuis ton browser ?
tu as une erreur en console ?

[michael_cassio]

C'est mon erreur:

[Vue warn]: Unhandled error during execution of render function
at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

router.js?41cb:17 Uncaught (in promise) TypeError: c is not a function
at Proxy.render (router.js?41cb:17)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
at componentEffect (runtime-core.esm-bundler.js?5c40:4198)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4181)
at mountComponent (runtime-core.esm-bundler.js?5c40:4140)
at processComponent (runtime-core.esm-bundler.js?5c40:4100)
at patch (runtime-core.esm-bundler.js?5c40:3718)
at componentEffect (runtime-core.esm-bundler.js?5c40:4286)

Le point es que vue-router fait tout le management.
En pricipe je seulement utilize le le composant <router-link> comme ca (avec integration i18n):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <locale-switcher></locale-switcher>
 
 <li><router-link to="/home">{{ $t('nav.home') }}</router-link></li>
                <li><router-link to="/projects">{{ $t('nav.projects') }}</router-link></li>
                <li><router-link to="/blog">{{ $t('nav.blog') }}</router-link></li>
                <li><router-link to="/design">{{ $t('nav.design') }}</router-link></li>
                <li><router-link to="/about">{{ $t('nav.about') }}</router-link></li>
                <li><router-link to="/contact">{{ $t('nav.contact') }}</router-link></li>

Avec le fonction $t, je peux basculer entre les langues. Cela fonctionne, mais la connexion du router
ne foncionne tout simplment pas.

[gwyohm]

avec vue3, je sais pas si on te passe createElement dans render. tu peux essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
// peut être createElement ?
import { h } from 'vue';
 
// ... 
component: {
  render() {
    return h('router-view');
  },
}
// ...

[michael_cassio]

Merci gwyohm,

Je ne recois pas un erreur, mais pas non plus la fonctionalité souhaitée.
'h' n'est pas un fonction de vue!
i18n est responsable pour l'allocation de: {fr.json, en.json, es.json...} et les routes

Mais je ne comprends pas l'interaction de vue-router et i18n.

[gwyohm]

'h' n'est pas un fonction de vue!

Si, https://v3.vuejs.org/api/global-api.html#h

ton erreur, c'etait qu'il ne trouvait pas "c" (cf ton message d'erreur), pcq comme tu peux le voir createElement n'est plus un argument de render dans vue3. createElement nommée h doit être importée depuis vue dans ton composant.

Quelle version de vue utilises-tu ?

[michael_cassio]

C'est peut-etre vrai, mais cela ne résout pas le probleme.

version(https://github.com/vuejs/vue-next)

[gwyohm]

ca ne résout pas le problème que tu cherches à résoudre, mais as-tu toujours une erreur dans ta console ?
Je pense qu'avoir un path "/" dans ta config des children pour Home n'est pas correct
si tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ path: "", redirect: "home" }

ca fait pareil ?

[michael_cassio]

mais as-tu toujours une erreur dans ta console ?

J n'ai pas une erreur, la syntaxe est correct!
Cela ne dépend pas non plus des "routes" (aussi avec: { path: "", redirect: "home" }), toute la foncionnalité n'est pas correct.

i18n doit conseiller l'information, qui peut être implémenté par vue-router,
Il est possible que i18n n'ait pas encore été implémenté pour vue3!?

Je publierai une question sur le forum officiel de vue. La derniere fois ils ont repondu en chinois.