Question

我正在尝试使用 Vue.js 构建一个简单的列表详细信息应用程序，但我什至无法使基本的页面转换生效。这是我到目前为止的内容：

在 App.vue 中：

<template id="app">
  <v-ons-navigator swipeable
    :page-stack="pageStack"
    @push-page="pageStack.push($event)"
  ></v-ons-navigator>
</template>

<template id="page1">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Page 1</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      This is the first page
      <v-ons-button @click="push">Push Page 2</v-ons-button>
    </p>
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Page 1</v-ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </v-ons-toolbar>
    <p style="text-align: center">This is the second page</p>
  </v-ons-page>
</template>


<script>

const page2 = {
  key: 'page2',
  template: '#page2'
};

const page1 = {
  key: 'page1',
  template: '#page1',
  methods: {
    push() {
      this.$emit('push-page', page2);
    }
  }
};

export default {
  name: 'app',
  data () {
  return {
       pageStack: [page1]
    }
  }
}
</script>

在main.js中：

import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios'
import vueAxios from 'vue-axios'
import VueOnsen from 'vue-onsenui'

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

Vue.use(VueOnsen);
Vue.use(vueAxios, axios, VueOnsen);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  data() {
    return {}
  }
}).$mount('#app')

我收到此错误：

[Vue警告]：找不到注入“导航器”

我正在尝试使用此处提供的示例：https://onsen.io/v2/api/vue/v-ons-navigator.html

如何使ons-navigator与Vue.js一起使用？

0 个答案: