Vue 项目中实现在所有页面固定一个全局对话栏组件

<template>
  <el-drawer
    title="我是标题"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="30%"
    :withHeader="true">
    <span>我是全局对话栏内容...</span>  
  </el-drawer>
</template>
<script>
export default {
  data() {
    return {
      drawerVisible: true
    }
  }  
}
</script>

// main.js
import Drawer from './Drawer.vue'
Vue.component('Drawer', Drawer)

// router.js
router.beforeEach((to, from, next) => {
  const app = document.querySelector('#app')
  const drawer = document.createRange().createContextualFragment('<Drawer></Drawer>')
  app.appendChild(drawer)
  next()
})

<template>
 <div>
   <h1>This is About Page</h1>
 </div>  
</template>