Как связать содержимое html <title> в vuejs?

Я пытаюсь демонстрацию на vuejs. Теперь я хочу, чтобы заголовок html связывал поле vm.

Ниже я попытался:

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'
        }
    });
});

Но название казалось не ограниченным, как заставить его работать?

Ответ 1

Поскольку я предпочитаю устанавливать <title> в части просмотра, по сути, есть два способа ее решения.

Использовать существующий компонент

Например, vue-headful:

устанавливать
npm i vue-headful
Зарегистрировать компонент:
import Vue from 'vue';
import vueHeadful from 'vue-headful';

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

new Vue({
    // your configuration
});
А затем используйте компонент vue-headful в каждом из ваших представлений:
<template>
    <div>
        <vue-headful
            title="Title from vue-headful"
            description="Description from vue-headful"
        />
    </div>
</template>

Обратите внимание, что vue-headful поддерживает не только заголовок, но также несколько метатегов и язык документа.

Создайте свой собственный компонент

Создайте файл VUE, содержащий:

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

Зарегистрируйте компонент, используя

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

Тогда вы можете использовать его в своих взглядах, например,

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

Ответ 2

Вы можете сделать это с 1 строкой в файле App.vue, например так:

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

Или измените содержимое тега <title> в public/index.html

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

Ответ 3

Этот ответ для vue 1.x

с использованием 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>

Ответ 4

Заголовок и метатеги могут быть отредактированы и обновлены асинхронно.

Вы можете использовать управление состоянием, создать магазин для SEO с помощью vuex и соответствующим образом обновить каждую часть.

Или вы можете легко обновить элемент

created: function() {  

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

}

Ответ 5

Просто позвонить сюда. Я читал, что VueJS не хочет иметь ничего общего с мета-вещью, поэтому я бы делал такие вещи за пределами царства VueJS.

В основном сделайте простой ванильный JS сервис, как показано ниже. Здесь вы можете добавить все функции для обработки метаданных, таких как данные Open Graph.

meta.js

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

Теперь мы можем импортировать службу в main, а затем предоставить ее любому компоненту приложения, который этого хочет. Я мог бы даже использовать свой meta сервис в других проектах, которые используют разные фреймворки, такие как React или Angular. Портативность супер круто!

main.js

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

Здесь компонент внедряет мета сервис, который он хочет использовать.

someView.vue

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

Таким образом, мета-сервис отделен от приложения, потому что разные родительские компоненты могут provide разные версии meta сервиса. Теперь вы можете реализовать различные стратегии, чтобы увидеть, какая из них подходит вам, или даже разные стратегии для каждого компонента.

По сути, инъекция проходит по иерархии компонентов и получает meta сервис от первого родителя, который его предоставляет. Пока мета-сервис следует правильному интерфейсу, вы великолепны.

Разделение с DI это очень круто 😃