使用 vue 2、路由器和 vue-loader 进行引导

Posted 2023-02-16

【中文标题】使用 vue 2、路由器和 vue-loader 进行引导

【英文标题】：Bootstraping with vue 2, router and vue-loader

【发布时间】：2017-02-12 17:53:16

【问题描述】：

使用 vuejs 1 的代码是：

const App = Vue.extend(Index);
router.start(App, '#app');

Index 是一个组件。

我尝试像这样将其转换为 vue 2：

const App = Vue.extend(Index);
const app = new App(router).$mount('#app');

但这给出了[Vue warn]: Error when rendering root instance。

重写这个的正确方法是什么？

谢谢

【参考方案1】：

你必须给路由器作为参数：

const app = new App( router ).$mount('#app');

例子：

const Index = 
  template: `<div id="app">It's working!</div>`

const App = Vue.extend(Index)
const router = new VueRouter()

const app = new App( router ).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

【讨论】：

非常感谢工作代码 sn-p！现在，在我的应用程序中，它显示Unknown custom element: <router-view>。试图找出原因……

如果你使用 npm 和 webpack/browserify，你必须调用 Vue.use(VueRouter) 以确保 vue-router 注册组件 <router-view> @francoisromain

【参考方案2】：

试试这个（应用 == 索引）

const App = Vue.extend(require('./App.vue'))

const router = new VueRouter(
  routes,
  mode: 'abstract'
)

new App(
  router,
).$mount('#app')