目录

components => navBar.vue

main.js 

App.vue 

router =>index.js

store=>index.js

如果要获取非路由 页面的 title，可以通过如下方式赋值

---

components => navBar.vue

1 封装navBar组件

2 动态绑定title的值（这里把title的值存储到了vuex中）

<template>
  <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { NavBar } from 'vant'
export default {
  components: {
    [NavBar.name]: NavBar
  },
  setup() {
    const onClickLeft = () => history.back()
    const store = useStore()
    const title = computed(() => store.state.app.navTitle)

    return {
      onClickLeft,
      title
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #e5bf28;

  ::v-deep .van-nav-bar__text {
    color: #fff;
  }

  ::v-deep .van-icon {
    color: #fff;
  }

  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
</style>

main.js 

1 在main.js中全局注入，自定义组件引入名称

//全局引入navBar组件
import navBar from '@/components/navBar.vue'
app.component('nav-bar', navBar)

App.vue 

1 全局页面引入navBar

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <router-view />
  </div>
</template>

router =>index.js

1 在路由中获取到当前路由标题，存储到store中的title中

2 引入vuex，获取更新store中title的方法

import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'

const baseRoutes = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/Index'),
    meta: {
      title: '首页'
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login'),
    meta: {
      title: '登录页'
    }
  },

]

const router = createRouter({
  // hash模式：createWebHashHistory，history模式：createWebHistory
  history: createWebHashHistory(), 
  routes: routes,
})

router.beforeEach((to, form, next) => {
  const { title } = to.meta
  console.log('🐕', document.title)
  /* 路由发生变化修改页面title */
  document.title = title || ''
  // if (to.meta.title) {
  //    document.title = to.meta.title
  // }
  store.commit('SET_NAV_TITLE', title || '')
  }

store=>index.js

1 在state中定义一个title变量

2 在mutations定义一个方法，修改title的值

const state = {
  navTitle: '',
}

const mutations = {
	SET_NAV_TITLE(state,title){
		state.navTitle = title
	},
}

如果要获取非路由 页面的 title，可以通过如下方式赋值

  mounted() {
    this.$store.commit('SET_NAV_TITLE', this.。。。。。)
  }