web-dev-qa-db-fra.com

Comment puis-je lier le contenu html <title> dans vuejs?

J'essaye une démo sur vuejs. Maintenant, je veux que le titre HTML lie un champ VM.

Le ci-dessous est ce que j'ai essayé:

index.html

<!DOCTYPE html>
<html id="html">
<head>
    <title>{{ hello }}</title>
    <script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>

app.js

define([
    'jquery', 'vue'
], function ($, Vue) {
    var vm = new Vue({
        el: 'html',
        data: {
            hello: 'Hello world'
        }
    });
});

Mais le titre ne semblait pas limité, comment le faire fonctionner?

javascripthtmlmvvmfrontendvue.js
42
Alfred Huang

Comme je préfère régler le <title> Dans la partie vue, il existe essentiellement deux façons de le résoudre.

Utiliser un composant existant

Par exemple, vue-headful :

Installer

npm i vue-headful

Enregistrez le composant:

import Vue from 'vue';
import vueHeadful from 'vue-headful';

Vue.component('vue-headful', vueHeadful);

new Vue({
    // your configuration
});

Et utilisez ensuite le composant vue-headful dans chacune de vos vues:

<template>
    <div>
        <vue-headful
            title="Title from vue-headful"
            description="Description from vue-headful"
        />
    </div>
</template>

Notez que vue-headful supporte non seulement le titre, mais également plusieurs balises META et la langue du document.

Créez votre propre composant

Créez un fichier vue contenant:

<script>
    export default {
        name: 'vue-title',
        props: ['title'],
        watch: {
            title: {
                immediate: true,
                handler() {
                    document.title = this.title;
                }
            }
        },
        render () {
        },
    }
</script>

Enregistrez le composant en utilisant

import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);

Ensuite, vous pouvez l’utiliser dans vos vues, par exemple.

<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>
64
str

Vous pouvez le faire avec 1 ligne dans le fichier App.vue, comme ceci:

<script>
    export default {
        name: 'app',
        created () {
            document.title = "Look Ma!";
        }
    }
</script>

Ou changez le <title> contenu de la balise dans public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Look Ma!</title> <!- ------ Here ->
  </head>
...
22
MonoThreaded

Cette réponse est pour vue 1.x

en utilisant requirejs.

define([
  'https://cdn.jsdelivr.net/vue/latest/vue.js'
], function(Vue) {
  var vm = new Vue({
    el: 'html',
    data: {
      hello: 'Hello world'
    }
  });
});
<!DOCTYPE html>
<html id="html">

<head>
  <title>{{ hello }}</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script>
</head>

<body>
  {{ hello }}
  <input v-model="hello" title="hello" />
</body>

</html>

vous pouvez le faire comme ceci en utilisant la fonction prête pour définir la valeur initiale et regarder pour mettre à jour lorsque les données changent.

<html>
<head>
<title>Replace Me</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input v-model="title">
</div>


<script>
new Vue({
    el: '#app',
    ready: function () {
        document.title = this.title
    },
    data: {
        title: 'My Title'
    },
    watch: {
        title: function (val, old) {
            document.title = val
        }
    }
})
</script>

</body>
</html>

aussi j'ai essayé ceci basé sur votre code original et cela fonctionne

<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input v-model="title">
</div>

<script>
new Vue({
    el: 'html',
    data: {
        title: 'My Title'
    }
})
</script>

</body>
</html>
6
vbranden

Les balises de titre et méta peuvent être modifiées et mises à jour de manière asynchrone.

Vous pouvez utiliser la gestion des états, créer un magasin pour le référencement à l'aide de vuex et mettre à jour chaque partie en conséquence.

Ou vous pouvez facilement mettre à jour l'élément par vous-même

created: function() {  

  ajax().then(function(data){
     document.title = data.title  
     document.head.querySelector('meta[name=description]').content = data.description
  })

}
2
serkan

Juste pour sonner ici. J'ai lu que VueJS ne veut rien avoir à faire avec les méta-trucs donc je ferais ce genre de choses en dehors du royaume "VueJS".

Fondamentalement, faites un service simple Vanilla js comme ci-dessous. Ici, vous pouvez ajouter toutes les fonctions permettant de gérer les métadonnées telles que les données Open Graph.

meta.js

export setTitle(title) {
    document.title = title  
}

Nous pouvons maintenant importer le service dans main puis le fournir à n’importe quel composant de l’application qui le souhaite. Je pourrais même utiliser mon service meta dans d'autres projets qui utilisent différents frameworks tels que React ou Angular. La portabilité est super cool!

main.js

import meta from './meta'
new Vue({
    router,
    render: h => h(App),
    provide: {
        meta: meta
    }
}).$mount('#app')

Ici, le composant injecte le méta-service qu’il souhaite utiliser.

someView.vue

export default {
    name: 'someView',
    inject: ['meta'],
    data: function() {
        returns {
            title: 'Cool title'
        }
    },
    created: function() {
        this.meta.setTitle(this.title);
    }
}

Ainsi, le méta-service est découplé de l'application car différents composants parents peuvent provide différentes versions du service meta. Vous pouvez maintenant mettre en œuvre différentes stratégies pour déterminer celle qui vous convient le mieux ou même différentes stratégies par composant.

En gros, l'injection passe en revue la hiérarchie des composants et prend le service meta du premier parent qui le fournit. Tant que le méta-service suit une interface appropriée, vous êtes en or.

Le découplage avec DI est super cool ????

0
mr haven