问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用 vue-router 时如何更改页面标题？

社区维基
1
新手上路，请多包涵

如果可能，我想在路线定义中指定我的头衔。通常在 <head><title> 中指定并显示在浏览器标题栏中的内容。

我的项目设置如下：

main.js

 import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false

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

路由器.js

 import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills,
      meta: { title: 'Skills - MyApp' } // <- I would to use this one
    },
    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About,
      meta: { title: 'About - MyApp' }
    }
  ]
})

最好，我想要一个自动系统，而不是在每个组件的创建功能上更改页面标题。谢谢。

原文由 darkhorse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译vue.jsvuejs2vue-router
阅读 534
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以将导航守卫与路由器定义一起使用：

 import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    // Use next tick to handle router history correctly
    // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
    Vue.nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

您需要将导出更改为：

 const router = new Router({ ... });
...
export default router;

或者你可以在你的根组件上使用即时观察者：

 export default {
    name: 'App',
    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                document.title = to.meta.title || 'Some Default Title';
            }
        },
    }
};

原文由 Steven B. 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

高级变体

使用 vue-meta

第一次运行 npm install vue-meta

并将其包含在您的 main.js 中；

 import VueMeta from 'vue-meta'
Vue.use(VueMeta)

这样做之后，您可以为 每个 vue 组件 添加一个 metaInfo() 方法，处理元数据；

 metaInfo() {
        return {
            title: "Epiloge - Build your network in your field of interest",
            meta: [
                { name: 'description', content:  'Epiloge is about connecting in your field of interest. Our vision is to help people share their knowledge, work, projects, papers and ideas and build their network through what they do rather where they live, study or work.'},
                { property: 'og:title', content: "Epiloge - Build your network in your field of interest"},
                { property: 'og:site_name', content: 'Epiloge'},
                {property: 'og:type', content: 'website'},
                {name: 'robots', content: 'index,follow'}
            ]
        }
    }

此外，这可用于 动态元信息；

 export default{
    name: 'SingleUser',
    data(){
        return{
            userData: {},
            ...
            aws_url: process.env.AWS_URL,
        }
    },
    metaInfo() {
        return {
            title: `${this.userData.name} - Epiloge`,
            meta: [
                { name: 'description', content: 'Connect and follow ' + this.userData.name + ' on Epiloge - ' + this.userData.tagline},
                { property: 'og:title', content: this.userData.name + ' - Epiloge'},
                { property: 'og:site_name', content: 'Epiloge'},
                { property: 'og:description', content: 'Connect and follow ' + this.userData.name + ' on Epiloge - ' + this.userData.tagline},
                {property: 'og:type', content: 'profile'},
                {property: 'og:url', content: 'https://epiloge.com/@' + this.userData.username},
                {property: 'og:image', content: this.aws_url + '/users/' + this.userData.profileurl + '-main.jpg' }
            ]
        }
    },
    ...
}

来源： Medium - 如何为您的 Vue.js 应用程序添加动态元标记以进行 Google SEO

原文由 nonNumericalFloat 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题