vuerouter通过路由来实现切换头部标题功能-创新互联

在做单页面应用程序时，一般页面布局头尾两块都是固定在布局页面，中间为是路由入口。这时访问页面时头部标题不会变，该问题的解决方案如下：

为八步等地区用户提供了全套网页设计制作服务，及八步网站建设行业解决方案。主营业务为成都网站设计、网站建设、外贸网站建设、八步网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

通过采用组件内路由卫士(beforeRouterEnter、beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息。点击查看文档

beforeRouterEnter：第一次进入时调用。

beforeRouterUpdate：重复使用当前组件时调用。

效果图如下：

注意看页面标题与图标变换

 路由元信息（meta）配置

在路由元信息中配置页面标题，通过组件内路由卫士获取

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: "help",
      name: "help",
      meta: {
        title: "新手帮助"
      },
      component: () => import('./views/Help.vue')
    },
    {
      path: "page",
      name: "page",
      meta: {
        title: "宝贝信息"
      },
      component: () => import('./views/Page.vue')
    }
  ]
})

本文题目：vuerouter通过路由来实现切换头部标题功能-创新互联
分享URL：http://shouzuofang.com/article/pgcsh.html