javascript - vue-router不生效

Question

刚刚接触vuejs的路由，使用的是vue-router+Webpack。现在的问题就是不管怎么输入路由，页面总是导向同一个页面。请各位帮忙提示下到底哪儿出了问题。

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

import App from './components/app.vue'
import need from './components/needMarket.vue'
import donate from './components/donateMarket.vue'
Vue.config.debug = true;

var router = new VueRouter();

router.map({
    '/index' : {
        name : 'index',
        component : App
    },
    '/donate' : {
        name : 'donate',
        component : donate
    },
    '/need' : {
        name : 'need',
        component : need
    }
});

router.start(App,"router-view");

app.vue如下

<template>
  <p class="hello">
    <h1>{{msg}}</h1>
  </p>
</template>

<script>
export default {
  data () {
    return {
      msg: 'app'
    }
  }
}
</script>

<style>
h1 {
  color: #42b983;
}
</style>

needMarket.vue如下

<template>
  <p class="hello">
    <h1>{{msg}}</h1>
  </p>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1 {
  color: #42b983;
}
</style>

<script>
module.exports =  {
  data: function () {
    return {
      msg: 'need'
    }
  }
}
</script>

donateMarket.vue

<template>
  <p class="hello">
    <h1>{{msg}}</h1>
  </p>
</template>

<script>
export default {
  data () {
    return {
      msg: 'donate'
    }
  }
}
</script>

<style>
h1 {
  color: #42b983;
}
</style>

但是运行完npm run dev以后 无论在地址栏里面怎么输入路径 显示的都是app.vue中的内容

谁能告诉我下是什么原因，哪里错了？感激不尽！

Answer 1

你的入口app.vue少了渲染组件的<router-view></router-view>。