How to modify the page title in uniapp

In uniapp, we often need to modify the title of the page. For example, when implementing the WeChat sharing function, you need to set the sharing title by modifying the page title. Below I will introduce in detail how to modify the page title in uniapp.

First of all, in uniapp, we can use the vue-meta-info plug-in to modify the page's title, description, keywords and other meta information. The usage of this plug-in is the same as in ordinary Vue projects. After installation, in the component that needs to modify the title, we can use the following code to set the page title:

export default {
  name: 'MyComponent',
  metaInfo() {
    return {
      title: '页面标题'
    }
  }
}

Among them, name represents the name of the component and is used as the title prefix of the page, and the metaInfo() method Then an object containing meta information is returned. We can set the title attribute in this object to modify the title of the page.

It should be noted that when using the vue-meta-info plug-in, you need to register the plug-in globally in main.js:

import Vue from 'vue'
import VueMeta from 'vue-meta-info'
Vue.use(VueMeta)

In addition to the vue-meta-info plug-in, we can also Use the custom navigation bar and page configuration provided by uni-app to modify the page title. The specific method is as follows:

1. Custom navigation bar

In uni-app, we can modify the page title by setting a custom navigation bar. We can add the following code to the top template of the page component:

<template>
  <view>
    <custom-navigation :title="title"></custom-navigation>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavigation from '@/components/custom-navigation'
export default {
  components: { CustomNavigation },
  data() {
    return {
      title: '页面标题'
    }
  }
}
</script>

In this code, we introduce a custom navigation bar component and use the title attribute to set the page title. It should be noted that the title attribute here is an attribute of the custom navigation bar component and needs to be defined in the component definition:

export default {
  name: 'CustomNavigation',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 自定义返回事件
    handleClickBack() {
      uni.navigateBack()
    }
  }
}

In this custom navigation bar component, we define a props attribute title, Used to receive the page title passed by the parent component. At the same time, we can also add our own business code to this custom navigation bar component, such as a custom return button, etc.

2. Page configuration

We can also set independent configuration information for each page in the pages.json file in uni-app. For example, we can add the following code to the pages.json file to set the title of a page:

{
  "path": "pages/my-page/my-page",
  "style": {
    "navigationBarTitleText": "页面标题"
  }
}

In this configuration information, we modify the page title by setting the navigationBarTitleText attribute. It should be noted that this method only applies to the native page of uni-app. For the page components of uni-app, you need to use the vue-meta-info plug-in or a custom navigation bar to modify it.

To sum up, we can modify the title of the page in uniapp through the vue-meta-info plug-in, custom navigation bar and page configuration. In actual development, we can choose different methods according to specific scenarios to improve our development efficiency.

The above is the detailed content of How to modify the page title in uniapp. For more information, please follow other related articles on the PHP Chinese website!