如何在Vue中动态更改菜单项名称

Question

我有一个组件DocumentRegistration，但它不仅用于注册，还用于编辑文档。 我还有一个 Navigation 组件

<template>
  <div>
    <b-navbar
      toggleable="sm"
      class="mb-4"
      type="dark"
      variant="dark">
      <b-navbar-toggle target="nav_collapse"/>
      <b-navbar-brand href="/">PDN</b-navbar-brand>
      <b-collapse
        id="nav_collapse"
        is-nav>
        <b-nav pills>
          <router-link
            to="persons"
            class="nav-item nav-link"
            active-class="active">Persons</router-link>
          <router-link
            to="doc-registration"
            class="nav-item nav-link"
            active-class="active">Document Registration</router-link>
          <router-link
            to="documents"
            class="nav-item nav-link"
            active-class="active">Documents</router-link>
        </b-nav>
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown
            v-if="$auth.check()"
            right>
            <template slot="button-content">
              <em id="username">{{ $auth.user().name }}</em>
            </template>
            <b-dropdown-item href="#">Профиль</b-dropdown-item>
            <b-dropdown-item
              href="#"
              @click="$auth.logout()">Выйти</b-dropdown-item>
          </b-nav-item-dropdown>
          <b-nav-item
            v-else
            id="login-nav"
            href="#"
            @click="$refs.loginModal.show()">
            Войти
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <login
      id="login-modal"
      ref="loginModal" />
  </div>
</template>

<script>
import Login from '../Auth/components/Login'
export default {
  components: {
    Login
  }
}
</script>

Document Registration 是其自身菜单项的名称。 根据操作编辑或注册导航到文档注册时，如何动态更改此名称？

Answer 1

尝试使用“手表”和“数据”

首先，您创建数据变量，如

1. editMode（它只是状态标志）

与

1. menuItemName（仅用于路由器标签字段=文档注册）

并观看编辑模式

watch: {
  editMode(val) {
   if (val === 'edit') {
    this.menuItemName = 'Document Edit';
   } else if (val === 'create') {
    this.menuItemName = 'Document Registration';
   }
  },
}

现在您只需在需要更改时更改 editMode 变量。