时间戳

首页 > 解决方案 > 使用使用 vue-custom-element

vue.js - 使用使用 vue-custom-element

问题描述

我对 Vue 很陌生，正在尝试创建一个可以嵌入到非 Vue 应用程序中的 Vue 应用程序，所以我使用的是 vue-custom-element。我无法让路由在我的 Vue 应用程序小部件内工作。

我的应用程序中有两个组件 - 学校和学校。

在 main.js 我有这个：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import vueCustomElement from 'vue-custom-element'
import Schools from "./components/Schools";
import School from "./components/Schools";

Vue.use(vueCustomElement);
const router = new VueRouter({
    routes: [
      { path: '/', component: Schools },
      { path: '/school', component: School },
    ]
  })
App.router = router;
Vue.customElement('schools-widget', App)

然后在我的学校组件（Schools.vue）中我有

<router-link to="/school">School</router-link>

我希望将我从我的学校组件链接到我的学校组件。

但我得到了错误

Unknown custom element: <router-link> - did you register the component correctly?

我究竟做错了什么？

标签： vue.jsvuejs2vue-router

解决方案

您应该像这样将路由器注入组件：

Vue.customElement('schools-widget', {
  router,
  render: h => h(App)
});

更新一：刚刚发现忘记安装 Vue 路由器插件：

Vue.use(VueRouter)

推荐阅读