安装自定义 VueJs 插件的正确方法答案

【问题标题】：Correct way to install custom VueJs Plugin安装自定义 VueJs 插件的正确方法
【发布时间】：2017-11-14 10:06:09
【问题描述】：

我正在创建一个自定义插件，它使用 vuex 和 vue-authenticate 封装了一堆身份验证功能。

我遇到的问题是找出将模块加载并安装到 VueJS 中的正确方法，我不确定我的 webpack 或 vuejs 知识是否缺乏，但到目前为止我有以下内容

/node_modules/plugin/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import routes from './routes'
import store from './vuex/store'
import EventBus from './bus/eventBus'
import config from './config'
import ping from './vuex/modules/apiArchitect/ping/store'
import auth from './vuex/modules/apiArchitect/auth/store'
import user from './vuex/modules/apiArchitect/user/store'

Vue.use(Vuex)
Vue.use(EventBus)

const store = new Vuex.Store({
  modules: {
    ping,
    user,
    auth
  },
  strict: true
})

let apiArchitect = {}

apiArchitect.install = function (Vue, options) {
  Vue.prototype.$apiArchitect = store,
  Vue.prototype.$apiArchitect.$config = config
  Vue.prototype.$apiArchitect.$routes = routes

  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(apiArchitect)
  }
}


export default apiArchitect

/src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import apiArchitect from 'vue-apiarchitect'
import addRouteGuards from 'vue-apiarchitect/src/addRouteGuards'

Vue.config.productionTip = false
Vue.config.env = process.env.NODE_ENV

Vue.use(router)
Vue.use(apiArchitect)

console.log(apiArchitect)

addRouteGuards(router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

到目前为止，我能够导入插件并使用 Vue.use(apiArchitect) 运行安装钩子，我可以在我的 App.vue 中访问 this.$apiArchitect。

我遇到的问题是插件提供了一些存储在 $apiArchitect.routes 中的身份验证路由，这些路由需要与路由器提供的路由合并。如果我尝试在 main.js 中访问 $apiArchitect.routes，我会收到一个“未定义”错误，我只能在 vue 实例化后访问它们。如果我真的在 main.js 中尝试 console.log apiArchitect，我看到的只是一个包含安装功能的对象，我提供的插件都没有，这让我相信它没有正确安装。

有谁知道我如何访问 main.js 中的 apiArchitect.$routes 属性或实现此目的的更好方法？

谢谢

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

自 2.2.x 起，您可以使用 router.addRoutes() 动态添加路由。

参数必须是一个数组，使用相同的路由配置格式路由构造函数选项。

例如，可以在根组件的created钩子中使用addRoutes：

// your plugin
const myPlugin = {
  install: function(Vue, options) {
    Vue.prototype.$myPlugin = {
      routes: [{
      	path: '/myplugin', component: options.myComponent
      }]
    }
  }
}

// components
const testComponent = { template: '<p>Component called by plugin route</p>' }
const Home = { template: '<p>Default component</p>' }

// router
const router = new VueRouter({
  routes: [{
    path: '/', component: Home
  }]
})

Vue.use(VueRouter)
Vue.use(myPlugin, { myComponent: testComponent })

new Vue({
  el: '#app',
  router,
  created() {
    this.$router.addRoutes(this.$myPlugin.routes); // dinamically add routes
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <button @click="$router.push('/')">Home</button>
  <button @click="$router.push('/myplugin')">Custom</button>
  <router-view></router-view>
</div>

【讨论】：