我结合vue-router每次切换路由的时候都会新增一个editor！这个如何解决

[zhangwei900808]

代码：

<template lang="html">
  <!-- use with components - bidirectional data binding（双向数据绑定） -->
  <div class="">
    <quill-editor ref="myTextEditor"
                  v-model="content"
                  :config="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>

<script>
// import with ES6
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// use
Vue.use(VueQuillEditor)
// editor option example:
export default {
  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: {
       // something config
      }
    }
  },
  // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
  // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange({ editor, html, text }) {
      // console.log('editor change!', editor, html, text)
      this.content = html
    }
  },
  // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
  // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor
    }
  },
  mounted() {
    // you can use current editor object to do something(editor methods)
    console.log('this is my editor', this.editor)
    // this.editor to do something...
  }
}
</script>

<style lang="css">
</style>

[zhangwei900808]

import Vue from 'vue'
import VueRouter from 'vue-router'
import Example from '../components/Example.vue'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
import EleComponents from '../components/ElementComponents.vue'
import User from '../components/User.vue'
import to404 from '../components/404.vue'
import Map from '../pages/Map.vue'
import Editor from '../pages/Editor.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{
            path: '/',
            component: Home
        },
        {
            path: '/example',
            component: Example
        },
        {
            path: '/map',
            component: Map
        },
        {
            path: '/editor',
            component: Editor
        },
        {
            path: '/login/:id',
            component: Login,
            children: [
              {
                path:'',
                component:to404
              },{
                path: 'profile',
                component: User
            }]
        },
        {
            path: '/elecomponents',
            component: EleComponents
        }
    ],
    mode: 'history',
})

export default router;

[zhangwei900808]

找到解决办法了，原来外层要套个div，这算不算bug!!!

<div class="">
    <quill-editor ref="myTextEditor"
                  v-model="content"
                  :config="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
    </quill-editor>
  </div>

[surmon-china]

为啥不在入口文件use