vue基础-动态设置meta中title的方法

**Vue 基础 - 动态设置 meta 中 title 的方法**

在 Vue 应用开发中，经常需要根据不同的路由或状态来动态设置页面的标题。这种需求可以通过使用 Vue Router 和 Vuex 来实现。在本文中，我们将介绍如何动态设置 meta 中 title 的方法。

###1. 使用 Vue Router首先，我们需要了解 Vue Router 是一个用于管理应用程序路由的插件。它允许我们根据不同的路由来改变页面的内容和样式。

#### **1.1 创建路由**

在 `main.js` 文件中，创建一个新的 Vue Router 实例：

javascriptimport Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = falsenew Vue({
 render: h => h(App),
 router // 将 router 注入到 Vue 实例中}).$mount('#app')

#### **1.2 定义路由**

在 `router/index.js` 文件中，定义一个新的路由：

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue')
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue')
 }
 ]
})

#### **1.3 动态设置 meta 中 title**

在 `router/index.js` 文件中，使用 `$meta` 属性来动态设置 meta 中 title：

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue'),
 meta: {
 title: '首页' // 动态设置 meta 中 title }
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue'),
 meta: {
 title: '关于我们' // 动态设置 meta 中 title }
 }
 ]
})

###2. 使用 VuexVuex 是一个用于管理应用程序状态的插件。它允许我们根据不同的状态来改变页面的内容和样式。

#### **2.1 创建 Vuex**

在 `main.js` 文件中，创建一个新的 Vuex 实例：

javascriptimport Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = falsenew Vue({
 render: h => h(App),
 router,
 store // 将 store 注入到 Vue 实例中}).$mount('#app')

#### **2.2 定义状态**

在 `store/index.js` 文件中，定义一个新的状态：

javascriptimport Vuex from 'vuex'

const state = {
 title: ''
}

export default new Vuex.Store({
 state,
 mutations: {
 setTitle(state, payload) {
 state.title = payload }
 },
 actions: {
 setTitle({ commit }, payload) {
 commit('setTitle', payload)
 }
 }
})

#### **2.3 动态设置 meta 中 title**

在 `router/index.js` 文件中，使用 `$store` 属性来动态设置 meta 中 title：

javascriptimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue'),
 meta: {
 title: $store.state.title // 动态设置 meta 中 title }
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue'),
 meta: {
 title: $store.state.title // 动态设置 meta 中 title }
 }
 ]
})

### 总结在本文中，我们介绍了如何使用 Vue Router 和 Vuex 来动态设置 meta 中 title 的方法。通过使用 `$meta` 属性和 `$store` 属性，可以根据不同的路由或状态来改变页面的标题。

**示例代码**

javascript// router/index.jsimport Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
 path: '/',
 name: 'home',
 component: () => import('@/views/Home.vue'),
 meta: {
 title: '首页' // 动态设置 meta 中 title }
 },
 {
 path: '/about',
 name: 'about',
 component: () => import('@/views/About.vue'),
 meta: {
 title: '关于我们' // 动态设置 meta 中 title }
 }
 ]
})

// store/index.jsimport Vuex from 'vuex'

const state = {
 title: ''
}

export default new Vuex.Store({
 state,
 mutations: {
 setTitle(state, payload) {
 state.title = payload }
 },
 actions: {
 setTitle({ commit }, payload) {
 commit('setTitle', payload)
 }
 }
})

**注意**

* 在使用 `$meta` 属性和 `$store` 属性时，请确保它们已经注入到 Vue 实例中。
* 在使用 Vuex 时，请确保已经创建一个新的 Vuex 实例，并将其注入到 Vue 实例中。