Javascript 如何在 vuejs 中绑定 html <title> 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36612847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I bind the html <title> content in vuejs?
提问by Alfred Huang
I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
我正在尝试在 vuejs 上进行演示。现在我想要 html 标题绑定一个 vm 字段。
The below is what I tried:
以下是我尝试过的：
index.html
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
app.js
define([
'jquery', 'vue'
], function ($, Vue) {
var vm = new Vue({
el: 'html',
data: {
hello: 'Hello world'
}
});
});
But the title seemed not bounded, how to make it work?
但是标题似乎没有界限，如何使它起作用？
回答by str
As I prefer to set the <title>from the view part, there are essentially two ways to solve it.
由于我更喜欢<title>从视图部分设置 ，因此基本上有两种方法可以解决它。
Use an existing Component
使用现有组件
For example, vue-headful:
例如，vue-headful：
Install
npm i vue-headfulRegister the component:
import Vue from 'vue'; import vueHeadful from 'vue-headful'; Vue.component('vue-headful', vueHeadful); new Vue({ // your configuration });And then use the vue-headful component in every of your views:
<template> <div> <vue-headful title="Title from vue-headful" description="Description from vue-headful" /> </div> </template>
安装
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>
Note that vue-headfulnot only supports the title, but also several meta tags and the document language.
注意vue-headful不仅支持标题，还支持几个元标签和文档语言。
Create your own Component
创建自己的组件
Create a vue file containing:
创建一个包含以下内容的 vue 文件：
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
},
}
</script>
Register the component using
使用注册组件
import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);
Then you can use it in your views, e.g.
然后你可以在你的视图中使用它，例如
<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>
回答by MonoThreaded
You can do it with 1 line in the App.vue file, like this:
您可以使用 App.vue 文件中的 1 行来完成，如下所示：
<script>
export default {
name: 'app',
created () {
document.title = "Look Ma!";
}
}
</script>
Or change the <title>tag content in public/index.html
或更改<title>标签内容public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Look Ma!</title> <!- ------ Here ->
</head>
...
回答by vbranden
This answer is for vue 1.x
此答案适用于 vue 1.x
using requirejs.
使用 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>you can do it like this using the ready function to set the initial value and watch to update when the data changes.
您可以使用 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>
also i tried this based on your original code and it works
我也根据你的原始代码尝试了这个并且它有效
<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>
回答by serkan
Title and meta tags can be edited and updated asynchronously.
标题和元标记可以异步编辑和更新。
You can use state management, create a store for SEO using vuex and update each part accordingly.
您可以使用状态管理，使用 vuex 为 SEO 创建一个商店并相应地更新每个部分。
Or you can update the element by yourself easily
或者您可以轻松地自己更新元素
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector('meta[name=description]').content = data.description
})
}
回答by mr haven
Just to chime in here. I have read that VueJS wants nothing to do with the meta stuff so I would do such things outside of the "VueJS" realm.
只是想在这里插话。我已经读到 VueJS 不想与元数据有任何关系，所以我会在“VueJS”领域之外做这样的事情。
Basically make a plain vanilla js service like below. Here you could add all the functions to handle the meta data stuff such as the Open Graph data.
基本上制作一个简单的 vanilla js 服务，如下所示。在这里，您可以添加所有函数来处理元数据内容，例如 Open Graph 数据。
meta.js
meta.js
export setTitle(title) {
document.title = title
}
Now we can import the service in main and then provide it to any component in the app who wants it. I could even use my metaservice in other projects too which use different frameworks like React or Angular. Portability is super cool!
现在我们可以在 main 中导入服务，然后将其提供给应用程序中需要它的任何组件。我什至可以meta在其他项目中使用我的服务，这些项目使用不同的框架，如 React 或 Angular。便携性超爽！
main.js
main.js
import meta from './meta'
new Vue({
router,
render: h => h(App),
provide: {
meta: meta
}
}).$mount('#app')
Here the component injects the meta service it wants to use.
这里组件注入它想要使用的元服务。
someView.vue
someView.vue
export default {
name: 'someView',
inject: ['meta'],
data: function() {
returns {
title: 'Cool title'
}
},
created: function() {
this.meta.setTitle(this.title);
}
}
This way the meta service is decoupled from the app because different parent components can providedifferent versions of the metaservice. Now you can implement various strategies to see which one is right for you or even different strategies per component.
通过这种方式，元服务与应用程序分离，因为不同的父组件可以使用provide不同版本的meta服务。现在，您可以实施各种策略来查看哪一种适合您，甚至每个组件都有不同的策略。
Basically the inject walks up the component hierarchy and takes the metaservice from the first parent who provides it. As long as the meta service follows a proper interface, you're golden.
基本上注入会沿着组件层次结构向上走，并meta从提供它的第一个父级获取服务。只要元服务遵循适当的接口，您就是黄金。
Decoupling with DI is super cool
与 DI 解耦超酷
