使用 <router-link> 与 vue-custom-element

Question

我是 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>

我希望 link 我从我的学校组件到我的学校组件。

但是我得到了错误

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

我做错了什么？

Answer 1

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

const router = new VueRouter({
    routes: [
      { path: '/', component: Schools },
      { path: '/school', component: School },
    ]
  })
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

我觉得你的代码应该是这样的。

Answer 2

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

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

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

Vue.use(VueRouter)

使用 <router-link> 与 vue-custom-element

Using <router-link> with vue-custom-element

vue.js

vue-router

vuejs2