2

vue-cli コマンドを使用して新しいプロジェクトを作成しました。

vue init webpack myapp

vue-routerハンドル ルートにを追加しようとしていますが、問題が発生しています。

これが私のものmain.jsです：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

router.start(App, '#app')

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
}).$mount('#app')

これが私のものindex.htmlです：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>shivaminyanim.com</title>
  </head>
  <body>
    <app></app>
    <!-- built files will be auto injected -->
  </body>
</html>

そして、ここに私のものがありますApp.vue：

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use v-link directive for navigation. -->
      <a v-link="{ path: '/foo' }">Go to Foo</a>
      <a v-link="{ path: '/bar' }">Go to Bar</a>
    </p>
    <!-- route outlet -->
    <router-view></router-view>
  </div>
</template>

私が何をしても、それを機能させる方法を理解できないようです。現在、コンソールエラーは発生しませんが、ブラウザには表示されます

/foo を取得できません

それぞれのルートごとに。

私は現在使用しています

"vue": "^1.0.21"
"vue-router": "^0.7.13",

どうすれば vue-router を使い始めることができますか?

4

1 に答える 1

3

でブートストラップされた Vue インスタンスにルーターを追加する必要がありますmain.js。たとえば、次のようにします。

Vue 2.0 および Vue-router 2.0

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

Vue 1.0 および Vue-router < 2.0

router.start({
  components: { App }
}, '#app')
于 2016-09-19T05:58:51.257 に答える