如何在vuejs中绑定html<title>内容？{{地狱...</desc> <question vote="84"> <p>我正在尝试 vuejs 上的演示。现在我想要 html 标题绑定一个 vm 字段。</p> <p>以下是我尝试过的：</p> <p><pre><code>index.html</code></pre></p> <pre><code><!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> </code></pre> <p><pre><code>app.js</code></pre></p> <pre><code>define([ 'jquery', 'vue' ], function ($, Vue) { var vm = new Vue({ el: 'html', data: { hello: 'Hello world' } }); }); </code></pre> <p>但是标题好像没有限制，如何让它发挥作用？</p> </question> <answer tick="true" vote="117"> <p>基本上有两种方法可以解决这个问题。</p> <h1>使用现有的包</h1> <p>例如，<a href="https://vue-meta.nuxtjs.org/" rel="noreferrer"><strong>vue-meta</strong></a>：</p> <blockquote> <pre><code><template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', metaInfo: { // if no subcomponents specify a metaInfo.title, this title will be used title: 'Default Title', // all titles will be injected into this template titleTemplate: '%s | My Awesome Webapp' } } </script> </code></pre> </blockquote> <h1>创建您自己的组件</h1> <p>创建一个包含以下内容的 vue 文件：</p> <pre><code><script> export default { name: 'vue-title', props: ['title'], watch: { title: { immediate: true, handler() { document.title = this.title; } } }, render () { }, } </script> </code></pre> <p>使用</p>注册组件 <pre><code>import titleComponent from './title.component.vue'; Vue.component('vue-title', titleComponent); </code></pre> <p>然后您可以在模板中使用它，例如</p> <pre><code><vue-title title="Static Title"></vue-title> <vue-title :title="dynamic.something + ' - Static'"></vue-title> </code></pre> </answer> <answer tick="false" vote="68"> <p>您可以在 App.vue 文件中使用 1 行来完成此操作，如下所示：</p> <pre><code><script> export default { name: 'app', created () { document.title = "Look Ma!"; } } </script> </code></pre> <p>或者更改<pre><code><title></code></pre><pre>中的</pre><code>public/index.html</code></p>标签内容 <pre><code><!DOCTYPE html> <html> <head> <title>Look Ma!</title> <!- ------ Here -> </head> ... </code></pre> </answer> <answer tick="false" vote="6"> <p>这个答案适用于 vue 1.x</p> <p>使用requirejs。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>define([ 'https://cdn.jsdelivr.net/vue/latest/vue.js' ], function(Vue) { var vm = new Vue({ el: 'html', data: { hello: 'Hello world' } }); });</code></pre> <pre><code><!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></code></pre> </div> </div> <p></p> <p>您可以使用ready函数来设置初始值并在数据变化时观察更新。</p> <pre><code><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> </code></pre> <p>我也根据你的原始代码尝试过这个，它有效</p> <pre><code><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> </code></pre> </answer> <answer tick="false" vote="4"> <p>只是想插话一下。我读到 VueJS 不想与元内容有任何关系，所以我会在“VueJS”领域之外做这些事情。 </p> <p>基本上制作一个普通的 js 服务，如下所示。在这里，您可以添加所有函数来处理元数据，例如开放图数据。 </p> <p><pre><code>meta.js</code></pre></p> <pre><code>export setTitle(title) { document.title = title } </code></pre> <p>现在我们可以在 main 中导入服务，然后将其提供给应用程序中需要它的任何组件。我什至可以在其他使用不同框架（如 React 或 Angular）的项目中使用我的 <pre><code>meta</code></pre> 服务。便携性超酷！</p> <p><pre><code>main.js</code></pre></p> <pre><code>import meta from './meta' new Vue({ router, render: h => h(App), provide: { meta: meta } }).$mount('#app') </code></pre> <p>这里组件注入它想要使用的元服务。 </p> <p><pre><code>someView.vue</code></pre></p> <pre><code>export default { name: 'someView', inject: ['meta'], data: function() { returns { title: 'Cool title' } }, created: function() { this.meta.setTitle(this.title); } } </code></pre> <p>通过这种方式，元服务与应用程序解耦，因为不同的父组件可以<pre><code>provide</code></pre>不同版本的<pre><code>meta</code></pre>服务。现在，您可以实施各种策略，看看哪一种策略适合您，甚至可以针对每个组件实施不同的策略。 </p> <p>基本上，注入沿着组件层次结构向上移动，并从第一个提供它的父级获取 <pre><code>meta</code></pre> 服务。只要元服务遵循正确的接口，您就是黄金。 </p> <p>与 DI 解耦超级酷 😃 </p> </answer> <answer tick="false" vote="3"> <p>标题和元标签可以异步编辑和更新。 </p> <p>您可以使用状态管理，使用 vuex 创建用于 SEO 的商店并相应地更新每个部分。</p> <p>或者您可以轻松地自行更新元素</p> <pre><code>created: function() { ajax().then(function(data){ document.title = data.title document.head.querySelector('meta[name=description]').content = data.description }) } </code></pre> </answer> <answer tick="false" vote="2"> <p>如果您正在使用 Vuex 并希望 <pre><code><title></code></pre> 成为应用程序状态的一部分，那么：</p> <ul> <li>在 Vuex 中创建一个 <pre><code>pageTitle</code></pre> 状态变量</li> <li>使用 <pre><code>mapState()</code></pre></li> 将状态映射到模板 <li><pre><code>watch</code></pre>在模板中，可能添加<pre><code>immediate: true</code></pre>以立即触发观察者</li> <li>在观察者中，<pre><code>document.title = pageTitle</code></pre></li> </ul> <p>这将允许您使用 Vuex 管理标题并保持它们同步。我发现它对 SPA 很有用。</p> <p>通过这样做，您不必弄乱原来的 HTML 模板，因为大多数时候 Vue 根模板都驻留在内部 <pre><code><body></code></pre>。</p> <p>这是针对 Vue 2.x 的。</p> </answer> <answer tick="false" vote="0"> <pre><code>router.beforeEach((to, from, next) => { let mohican = to.path; if (mohican == '/') mohican = 'Home' document.title = mohican.replace('/',''); next(); return; }); </code></pre> </answer> <answer tick="false" vote="0"> <p>我有一个应用程序工具栏组件，该组件对于我的 SPA 网站的所有页面都是通用的，并且嵌套在 App.vue 中。在每个页面中，我使用 Vuex 存储在页面的 <em>created</em> 挂钩中更新我的常用工具栏标题：</p> <pre><code>//in every page.vue created() { this.$store.commit('toolBar', { pageTitle: this.pageTitle, ... }) }, </code></pre> <p>为了自动更新网站标题（以及工具栏标题），我在商店中使用了此突变：</p> <pre><code>//store.js toolBar(state,val){ document.title = val.pageTitle state.toolBar = val }, </code></pre> <p>同样，我使用相同的机制来更新，例如SEO 元数据</p> </answer> <answer tick="false" vote="0"> <p>就过去吧</p> <p>:title="数据.名称"</p> </answer> <answer tick="false" vote="0"> <p>您可以使用带元标记的 Vue Router。</p> <pre><code>import { createRouter } from "vue-router"; const router = createRouter({ routes: [ { path: "/", name: "Intro", component: () => import(/* webpackChunkName: "Intro" */ "../views/Intro.vue"), meta: { disableIfLoggedIn: true, title: "J6 Cafe", }, } ] }); router.beforeEach((to, from, next) => { //return meta title or else return My Default title document.title = to.meta.title ?? "My Default title"; }); </code></pre> <p>来源：<a href="https://mokkapps.de/vue-tips/dynamically-change-page-title" rel="nofollow noreferrer">https://mokkaapps.de/vue-tips/dynamically-change-page-title</a></p> </answer> </body></html> - javascript - SO中文参考