使用现有组件

Question

＆lt; p＆gt;我正在尝试关于vuejs的演示。现在我希望html标题绑定一个vm字段。＆lt; / p＆gt; ＆lt; p＆gt;以下是我尝试的内容：＆lt; / p＆gt; ＆LT p为H.;＆LT;代码＆GT; index.html的＆LT; /代码＆GT;＆LT; / p为H. ＆lt; pre＆gt;＆lt; code＆gt;＆lt;！DOCTYPE html＆gt; ＆lt; html id =“html”＆gt; ＆LT; HEAD＆GT; ＆lt; title＆gt; {{hello}}＆lt; / title＆gt; ＆lt; script src =“lib / requirejs / require.min.js”data-main =“app”＆gt;＆lt; / script＆gt; ＆LT; /头＆GT; ＆LT;身体GT; {{ 你好 }} ＆lt; input v-model =“hello”title =“hello”/＆gt; ＆LT; /体＆GT; ＆LT; / HTML＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆LT p为H.;＆LT;代码＆GT; app.js＆LT; /代码＆GT;＆LT; / p为H. ＆LT;预＆GT;＆LT;代码＆GT;定义（[ 'jquery'，'vue' ]，function（$，Vue）{ var vm = new Vue（{ el：'html'，数据：{ 你好：'你好世界' } }）; }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;但标题似乎没有限制，如何使其有效？＆lt; / p＆gt;

Answer 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>

Answer 2

您可以在App.vue文件中使用1行执行此操作，如下所示：

struct Records {
string Name;
string ID;
char Gender;
string Phone_Num;
Records *Next;
};

void SortRecords(Records* Item, Records* head, Records** Set_Head){
Records* Runner = head;

if (head == NULL){
    *Set_Head = Item;
}else if (Item->ID<head->ID){
    Item->Next=head;
}else{
    while(Item->ID>head->ID){
        if(Item->ID > Runner->ID && Runner->Next==NULL){
            Runner->Next=Item;
            break;
        }else if(Item->ID<Runner->Next->ID){
            Item->Next=Runner->Next;
            Runner->Next=Item;
            Runner=Item;
            cout<<Runner->Next->Name<<endl;
            break;
        }else{
            Runner=Runner->Next;
        }

    }

}

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

中的<title>代码内容

public/index.html

Answer 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>

你可以这样做，使用ready函数设置初始值，并观察数据更改时的更新。

<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>

我也根据您的原始代码尝试了这个并且它可以正常工作

<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>

Answer 4

可以异步编辑和更新标题和元标记。

您可以使用状态管理，使用vuex为SEO创建商店并相应地更新每个部分。

或者您可以轻松地自行更新元素

created: function() {  

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

}

Answer 5

如果您正在使用 Vuex 并希望 <title> 成为您应用程序状态的一部分，那么：

在 Vuex 中创建一个 pageTitle 状态变量
使用 mapState()
watch 在模板中，可能添加 immediate: true 立即触发观察者
在观察者中，document.title = pageTitle

这将允许您使用 Vuex 管理标题并使它们保持同步。我发现它对 SPA 很有用。

通过这样做，您不必弄乱您的原始 HTML 模板，因为大多数情况下 Vue 根模板驻留在 <body> 中。

这适用于 Vue 2.x。

Answer 6

只是在这里报时。我已经读到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服务。只要元服务遵循正确的接口，您就可以做到。

与去耦非常酷

Answer 7

router.beforeEach((to, from, next) => {
  let mohican = to.path; if (mohican == '/') mohican = 'Home'
  document.title =  mohican.replace('/','');
  next();
 return;
});

Answer 8

我有一个应用程序工具栏组件，它对我的 SPA 网站的所有页面都是通用的，并且嵌套在 App.vue 中。在每个页面中，我使用 Vuex 存储更新页面的 created 钩子中的常用工具栏标题：

//in every page.vue
created() {
  this.$store.commit('toolBar', { pageTitle: this.pageTitle, ...  })
},

为了自动更新网站标题（以及工具栏标题），我在商店中使用了这个修改：

//store.js
toolBar(state,val){
  document.title = val.pageTitle
  state.toolBar = val
},

同样，我使用相同的机制来更新，例如SEO 元数据

如何在vuejs中绑定html <title>内容？

8 个答案:

使用现有组件

创建您自己的组件