Programing

vue-roouter를 사용할 때 페이지 제목을 변경하는 방법

c10106 2022. 5. 17. 22:17
반응형

vue-roouter를 사용할 때 페이지 제목을 변경하는 방법

가능하면 경로 정의에 내 제목을 명시하고 싶다.일반적으로 에 지정되는 사항<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' }
    }
  ]
})

모든 구성요소의 생성 기능에 대한 페이지 제목을 변경하는 대신 자동 시스템을 원해.고마워요.

라우터 정의와 함께 네비게이션 가드를 사용할 수 있다.

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

고급 변종

vue-meta 사용

1차 주행npm install vue-meta

그리고 그것을 당신의 main.js에 포함시킨다.

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

그렇게 한 후에 당신은 a를 추가할 수 있다.metaInfo()모든 vue 구성 요소에 대한 메서드, 메타 데이터 처리

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' }    
            ]
        }
    },
    ...
}

출처: 중간 - Google SEO용 Vue.js 앱에 동적 메타 태그를 추가하는 방법

나는 위에 덧붙이고 싶은 것은 역사를 제대로 보존하지 못한다는 것이다.역사를 실제로 관리하는 더 나은 답변을 보려면 https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609을 참조하십시오.

사실, 스티븐 B의 해답에 대한 내 실험을 바탕으로, 나는 조금 더 나은 것을 생각해냈다.중요한 것은 이것이다.

watch: {
    $route(to, from) {
        document.title = to.meta.title || 'Some Default Title';
    },
}

처음에 페이지를 방문할 때(브라우저의 주소 표시줄을 통해 탐색함) 작동하지 않음대신 다음과 같은 게터를 만들 수 있다.

computed: {
    pageTitle: function() {
        return this.$route.meta.title;
    }
}

내 경우 "템플릿"의 헤더를 설정하려고 했는데(아이들의 경로가 신경 쓰지 않도록 하기 위해서) 그게 다였습니다. 당신의 경우, 일단 재산을 계산하고 나면 문서의 제목을 어떻게 설정할지 궁금할 수도 있고, 몇 가지 방법이 있을 겁니다.이러한 답변을 바탕으로 다음과 같은 작업을 수행할 수 있다.

created () {
    document.title = this.$route.meta.title;
}

생산에 사용하기 전에 동일한 페이지를 다시 방문하는 경우(매번 구성 요소가 생성되었는지 여부는 확실하지 않음)에 대해 테스트해 보겠다.

2021년 최신 작업 방식 - Vue3:

관련 구성 요소의 줄 이름 추가 위치.\router\index.js

  {
  path: '/',
  name: 'Home page'
  },

Load it in Before(이전에 로드각각 이 함수는 다음에도 기록).\router\index.js

router.beforeEach((to, from, next) => {
  document.title = to.name;
  next();
});

나는 믹스인을 사용하고 최소한의 코드가 필요한 이 솔루션을 찾았다.

https://medium.com/@Taha_Shashtari/변경하기 쉬운 페이지 제목-vue-6caf05006863 및 원래 https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/util/title.js

다음 경로 대신 뷰 구성요소에서 제목을 정의할 수 있기 때문에 마음에 든다.

src/mixins 디렉토리에서 아래 내용을 사용하여 titleMixin.js라는 새 파일을 생성한다.구성 요소의 '제목' 속성 값이 변수인지 함수인지 확인하고 제목 변수 값이나 제목() 함수의 반환 값을 반환하는 것이다.

function getTitle (vm) {
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}export default {
  created () {
    const title = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

main.js에 혼합물을 전체적으로 등록하십시오.Vue 인스턴스를 생성하기 전에 다음을 추가하십시오.

import titleMixin from './mixins/titleMixin'

Vue.mixin(titleMixin)

마지막으로 보기 구성요소 파일(예: Home.vue )에서 제목이라는 속성을 사용하여 페이지 제목을 정의하십시오.

export default {
  name: 'Home',
  title: 'Homepage Title',
  components: {
    ...
  }
}

작은 결점:믹싱은 세계적으로 등록되어 있어, 모든 구성 요소에 대해 믹싱을 사용할 수 있고, 심지어 비 뷰 구성 요소에서도 사용할 수 있다.

나는 제목을 편집하려고 했지만 라우터로 편집이 필요하지는 않았다.나는 탑재된 방법으로도 그것을 할 수 있다는 것을 알았다.

new Vue({
  mounted: function() {
    document.title = 'WOW VUE TITLE'
  }
})

vue 3의 경우:

네비게이션 가드

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(config.publicPath),
  routes,
});

const DEFAULT_TITLE = 'Some Default Title';
router.beforeEach((to) => {
  document.title = to.meta.title || DEFAULT_TITLE;
});

오, 다른 꾸러미를 봐.

여기서 훌륭한 해결책이 많이 보이는데, 내가 제출한 https://www.npmjs.com/package/@designeditor/vue-poe-seo.

<1mb, 종속성이 없고 유연한 구현이 모두 당신의 경로 구성에서 쉽게 제어된다.또한 에 대한 비동기식 지원도 가지고 있다.title기타 메타 데이터.

기본 예

import { seoGuardWithNext } from '@aminoeditor/vue-router-seo';
const routes = [{
    path: '/',
    component: Home,
    meta: {
        seo: {
            title: 'My title here',
            metaTags: [
                {
                    name: 'description',
                    content: 'My Description here'
                },
                {
                    name: 'keywords',
                    content: 'some,keywords,here'
                }
            ],
            richSnippet: {
                "@context": "https://schema.org",
                "@type": "Project",
                "name": "My Project",
                "url": "https://exampl.com",
                "logo": "https://example.com/images/logo.png",
                "sameAs": [
                    "https://twitter.com/example",
                    "https://github.com/example"
                ]
            }
        }
    }
},{
    path: '/about',
    component: About,
    meta: {
        seo: {
            // do some async stuff for my page title
            title: async route => {
                const data = await fetch('somedataurl');
                return `${data} in my title!`;
            }
        }
    }
}]

const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes,
})

// install the seo route guard here
router.beforeEach(seoGuardWithNext)

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

페이지 제목이 보기(예: 페이지 머리글)에서 일부 텍스트 내용을 반복하는 경우가 많으므로, 이 작업에 지시문을 사용할 것을 제안한다.

const updatePageTitle = function (title) {
    document.title = title + ' - My Cool Website';
};

Vue.directive('title', {
    inserted: (el, binding) => updatePageTitle(binding.value || el.innerText),
    update: (el, binding) => updatePageTitle(binding.value || el.innerText),
    componentUpdated: (el, binding) => updatePageTitle(binding.value || el.innerText),
});

모든 보기에서 브라우저 제목으로 간주할 요소 내용을 결정할 수 있다.

<h1 v-title>Some static and {{ dynamic }} title</h1>

또는 지시 값 안에 제목을 작성할 수 있다.

<div v-title="'Some static and ' + dynamic + 'title'">...</div>

참조URL: https://stackoverflow.com/questions/51639850/how-to-change-page-titles-when-using-vue-router

반응형