Vue-cli makes the title of the page header become the corresponding page title as the page jumps.

this is the title of the first page
clipboard.png


clipboard.png

header I was written by a single component
is how to switch headings

Feb.27,2021

set a headerTitle constant in each parent component (home page, merchandise list page), and then pass a value to the child component (Header).
the code is as follows:

//

<template>
  <div class="login">
    <Header :headTitle="headTitle"/>
    <div class='content-wrapper'></div>
  </div>
</template>

<script>
import Header from './Header'

export default {
  name: 'Login',
  data () {
    return {
      headTitle: 'Login'
    }
  },
  components: { Header }
}
</script>
//

<template>
  <div class='header'>{{ title }}</div>
</template>

<script>
export default {
  name: 'Header',
  props: ['headTitle'],
  data () {
    return {
      title: this.headTitle
    }
  }
}
</script>
Menu