在webpack 2中使用时,Vue 2.0路由器视图不起作用

时间:2017-04-27 05:10:28

标签: vue.js vue-router

当我点击foo时,控制台会按预期打印,但GetGattServicesForUuidAsync()不会渲染任何内容。

官方文档仅显示如何在单个html文件中使用它,javascript代码直接嵌入其中。我已经阅读了很多例子,但是我无法在webpack中创建它。

或者在webpack中有关于vue 2路由器的任何示例吗?

我将<router-view>文件创建为布局:

app.vue

和webpack条目文件:

<template>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

</template>

<script>
export default {

}
</script>

html文件:

import Vue from 'vue';
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(VueRouter)
import appView from 'app.vue'

const Foo = { template: '<div>foo</div>' , mounted(){console.log(this,'mount foo')}}
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({
  routes 
})

new Vue({
  router,
  render (h) {
      return h(appView);
  },
}).$mount('#app')

1 个答案:

答案 0 :(得分:0)

如果其他人像我一样落入这个陷阱。在您的webpack 2配置文件中,添加:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},