router-view data in view of the module parent module modifications

In a recent Vuetifymake a blog practiced hand, vueis really fragrant, but many of the concepts still need to slow down digestion - the record about the needs encountered and solutions

Description of Requirement

Blog design management background as shown below:

Shining Vuetifya document written example of such an interface is not difficult to see the structure of the code on the line:

<v-content>inside use <router-view>to display a view of Central Zi, the main framework for introductions problem we encounter is:
want to switch to a different SUMMARY dynamically modify the parent module breadcrumbs node view when the inside

Long-winded describe the desired effect:
when you click on the left menu "Article Management", breadcrumbs at the top to display the contents 首页/文章管理, has been switched to the following "Article Management" page status Click the plus button at the top breadcrumbs display content 首页/文章管理/添加文章, like ~ '

Implementation

Since vue unidirectional flow control of data, the sub-modules (module routing view) is not directly modify the data in the parent module, where the data showing binding of the parent breadcrumbs control module:

<v-breadcrumbs :items="bread" large></v-breadcrumbs>

data () {
      return {
        bread: [
          { text: '首页', href: '#/admin' },
        ],
      }
    },

<router-view>In view of the need to use the module $emitfunction way to trigger an event in the parent module to modify the data in the parent module to achieve the effect, then the parent module in the <router-view>event of a custom binding change_bread, and create a corresponding response function change_bread()(this response function the name of the event and do not have the same name, to facilitate better recognition on the line), should be noted that the response function parameters need to call a vue built-in variable $event, that is, from the view of the module using the $emitincoming trigger event variables.

<router-view @change_bread="change_bread($event)"></router-view>

methods: {
      change_bread (e) {
        this.bread = e
      },
    },

In view of the module mount()using a life cycle $emittrigger the parent module in change_breadthe event modifications bread crumbs to bind data

mounted () {      
      this.$emit('change_bread',
        [
          { text: '首页', href: '#/admin' },
          { text: '文章管理' },
        ],
      )
    },

The complete code

Parent moduleIndex.vue

<template>
    <v-app id="admin">
        <v-navigation-drawer color="primary" absolute dark app>
            <v-list dense nav class="py-0">
                <v-list-item two-line>
                    <v-list-item-content>
                        <h1>管理后台</h1>
                    </v-list-item-content>
                </v-list-item>

                <v-divider></v-divider>

                <v-list-item
                        v-for="item in items"
                        :key="item.title"
                        :href="item.href"
                        link
                >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>

                    <v-list-item-content>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-app-bar app color="white">
            <v-label>当前位置:</v-label>
            <v-breadcrumbs :items="bread" large></v-breadcrumbs>
        </v-app-bar>
        <v-content>
            <router-view @change_bread="change_bread($event)"></router-view>
        </v-content>
    </v-app>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        items: [
          { title: '首页', icon: 'mdi-home', href: '#/admin/' },
          { title: '文章管理', icon: 'mdi-playlist-edit', href: '#/admin/article' },
          { title: '栏目管理', icon: 'mdi-view-carousel', href: '#/admin/category' },
        ],
        bread: [
          { text: '首页', href: '#/admin' },
        ],
      }
    },
    methods: {
      change_bread (e) {
        this.bread = e
      },
    },    
  }
</script>

<style scoped>

</style>

View moduleArticle.vue

<template>
    <v-container id="article">
        <v-row>
            <v-btn fab color="primary" href="#/admin/article_add">
                <v-icon>fa-plus</v-icon>
            </v-btn>
        </v-row>
        <v-row>
            <v-col cols="12">
                <v-data-table :headers="headers" :items="articles">
                    <template v-slot:item.actions="{item}">
                        <v-btn small @click="edit(item)" color="primary">
                            编辑
                        </v-btn>
                        <v-btn small @click="remove(item)" color="error">
                            删除
                        </v-btn>
                    </template>
                </v-data-table>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
  export default {
    name: 'Article',
    data () {
      return {
        headers: [
          { text: '编号', value: 'id' },
          { text: '标题', value: 'title' },
          { text: '栏目', value: 'category' },
          { text: '创建时间', value: 'create_date' },
          { text: '浏览次数', value: 'views' },
          { text: '点赞数量', value: 'rates' },
          { text: '操作', value: 'actions', sortable: false },
        ],
        articles: [],
      }
    },
    methods: {
      init_table () {
        this.$http.get('article/get_all').then(res => {
          this.articles = res.data.data
        })
      },
      edit (item) {
        console.log(item)
        this.$router.push({
          name: 'edit_article',
          params: { art: item },
        })
      },
      remove (item) {
        console.log(item)
      },
    },
    mounted () {
      this.init_table()
      this.$emit('change_bread',
        [
          { text: '首页', href: '#/admin' },
          { text: '文章管理' },
        ],
      )
    },
  }
</script>

<style scoped>

</style>