使用vue-router设置每个页面的title

最新推荐文章于 2025-05-24 19:23:49 发布

晴天有点孤单

最新推荐文章于 2025-05-24 19:23:49 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 前端开发晴天有点孤单

本文链接：https://blog.youkuaiyun.com/qq_39517820/article/details/80509716

晴天有点孤单同时被 3 个专栏收录

124 篇文章

订阅专栏

前端开发

43 篇文章

订阅专栏

Vue

31 篇文章

订阅专栏

本文详细介绍了一个Vue项目的路由配置，包括各个页面的路径设置、名称定义及组件引用等关键信息，并展示了如何通过元信息设置页面标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Sass from '@/pages/sass'
import Filter from '@/pages/filter'
import Store from '@/pages/store'
import Provs from '@/pages/provs'
import Iconfont from '@/pages/iconfont'
import Animations from '@/pages/animations'
import Echarts from '@/pages/echarts'
import EchartsLine from '@/pages/echarts/line'

Vue.use(VueRouter)

const routerConfig = {
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: 'HelloWorld'
      }

    },
    {
      path: '/sass',
      name: 'Sass',
      component: Sass,
      meta: {
        title: 'vue-sass'
      }

    },
    {
      path: '/filter',
      name: 'Filter',
      component: Filter,
      meta: {
        title: 'vue-过滤器'
      }

    },
    {
      path: '/store',
      name: 'Store',
      component: Store,
      meta: {
        title: 'vue_store的使用'
      }

    },
    {
      path: '/provs',
      name: 'Provs',
      component: Provs,
      meta: {
        title: '省市二级联动'
      }

    },
    {
      path: '/iconfont',
      name: 'Iconfont',
      component: Iconfont,
      meta: {
        title: 'iconfont'
      }

    },
    {
      path: '/animations',
      name: 'Animations',
      component: Animations,
      meta: {
        title: 'vue动画'
      }

    },
    {
      path: '/Echarts',
      name: 'Echarts',
      component: Echarts,
      meta: {
        title: 'Echarts'
      }

    },
    {
      path: '/Echarts/line',
      name: 'EchartsLine',
      component: EchartsLine,
      meta: {
        title: 'Echarts-折线图'
      }
    }
  ]
}

const VueRouters = new VueRouter(routerConfig)
VueRouters.beforeEach((to, from, next) => {
  document.title = (to.meta && to.meta.title) || 'ZFJ_PRO'
  next()
})

export default VueRouters