vue change page title

标签：call   page   track   页面   eating   some   rem   router   including   

只需要在路由index.js配置meta的title就可以，然后在main.js实现页面改变title

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘index‘,
      component: index,
      meta: { title:‘index‘ }
    },
    {
      path: ‘/news‘,
      name: ‘news‘,
      component: news,
      meta: {title:‘news‘ }
    },






router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

如果想为了seo的话，可以添加name，和content

import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;
import App from ‘./App.vue‘;
import Nested from ‘./Nested.vue‘;

Vue.use(VueRouter);

const routes = [
  {
    path: ‘/‘,
    component: App,
    meta: {
      title: ‘Home Page - Example App‘,
      metaTags: [
        {
          name: ‘description‘,
          content: ‘The home page of our example app.‘
        },
        {
          property: ‘og:description‘,
          content: ‘The home page of our example app.‘
        }
      ]
    }
  },
  {
    path: ‘/about‘,
    // I‘m kind of cheating by reusing the main app component here.
    component: App,
    meta: {
      title: ‘About Page - Example App‘,
      metaTags: [
        {
          name: ‘description‘,
          content: ‘The about page of our example app.‘
        },
        {
          property: ‘og:description‘,
          content: ‘The about page of our example app.‘
        }
      ]
    },

    children: [
      {
        path: ‘nested‘,
        component: Nested,
        meta: {
          title: ‘Nested - About Page - Example App‘
        }
      }
    ]
  }
];


const router = new VueRouter({
  routes,
  mode: ‘history‘
});

new Vue({
  router,
  template: ‘‘
})
.$mount(‘#app‘);

main.js

// This callback runs before every route change, including on page load.
router.beforeEach((to, from, next) => {
  // This goes through the matched routes from last to first, finding the closest route with a title.
  // eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested‘s will be chosen.
  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);

  // Find the nearest route element with meta tags.
  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
  const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);

  // If a route with a title was found, set the document (page) title to that value.
  if(nearestWithTitle) document.title = nearestWithTitle.meta.title;

  // Remove any stale meta tags from the document using the key attribute we set below.
  Array.from(document.querySelectorAll(‘[data-vue-router-controlled]‘)).map(el => el.parentNode.removeChild(el));

  // Skip rendering meta tags if there are none.
  if(!nearestWithMeta) return next();

  // Turn the meta tag definitions into actual elements in the head.
  nearestWithMeta.meta.metaTags.map(tagDef => {
    const tag = document.createElement(‘meta‘);

    Object.keys(tagDef).forEach(key => {
      tag.setAttribute(key, tagDef[key]);
    });

    // We use this to track which meta tags we create, so we don‘t interfere with other ones.
    tag.setAttribute(‘data-vue-router-controlled‘, ‘‘);

    return tag;
  })
  // Add the meta tags to the document head.
  .forEach(tag => document.head.appendChild(tag));

  next();
});

vue change page title

标签：call   page   track   页面   eating   some   rem   router   including   

原文地址：https://www.cnblogs.com/cyany/p/9171673.html