第一次尝试Vue.js,Google、StackOverflow也查了好久，还是没发现原因，希望有人能帮忙解答下。
我的template都是直接写在html里面的，没有使用es6，也没有使用vue-cli。
主要html
<div class="container" id="page-home">
<!--header begin-->
<header class="title-bar search-bar">
<a href="index.html" class="logo iconfont"></a>
<div class="search-bar-input">
<label for="search"><i class="iconfont"></i> 搜索</label>
<input id="search" type="search">
</div>
<a href="profile.html" class="search-bar-login">
<i class="iconfont"></i> <span>登录</span>
</a>
</header>
<!--content begin-->
<div class="content">
<!--tab bar-->
<div class="tab-bar">
<ul class="clearfix">
<li class="fl"><a v-link="{ path:'/home' }">首页</a></li>
<li class="fl"><a v-link="{ path:'/articles' }">文章</a></li>
<li class="fl"><a v-link="{ path:'/travel' }">旅行</a></li>
<li class="fl"><a v-link="{ path:'/shop' }">商铺</a></li>
</ul>
</div>
<router-view></router-view>
</div>
<!--footer-->
<v-footer></v-footer>
<!--login-->
<v-login></v-login>
</div>
<!-- 首页 -->
<script type="template/vue" id="vHome">
<div class="home-view">
<!--slide banner-->
<slider-banner :banners="banners"></slider-banner>
<!--城市列表-->
<v-home-city :cards="cards"></v-home-city>
<!--良品列表-->
<v-home-item :items="items"></v-home-item>
</div>
</script>主要js
/**
* Components
*/
var sliderBanner = require('../components/sliderBanner.js');
var vFooter = require('../components/Footer.js');
var thirdLogin = require('../components/thirdLogin.js');
var vLogin = require('../components/login.js');
var vRoundCard = require('../components/roundCard.js');
var vItemList = require('../components/item.js');
var vHomeCity = Vue.component('v-home-city', {
template: '#vHomeCity',
props: ['cards']
});
var vHomeItem = Vue.component('v-home-item', {
template: '#vHomeItem',
props: ['items']
});
/**
* main Components
*/
var vHome = Vue.component('v-home', {
template: '#vHome',
data: function () {
return {
banners: [
{images: 'http://7xt8ri.com2.z0.glb.clouddn.com/banner.jpg', url: "article.html"},
{images: 'http://7xt8ri.com2.z0.glb.clouddn.com/banner.jpg', url: "article.html"},
{images: 'http://7xt8ri.com2.z0.glb.clouddn.com/banner.jpg', url: "article.html"}
],
cards: [
{
url: 'http://7xt8ri.com2.z0.glb.clouddn.com/article.png',
title: '绍兴 | 烟雨水色的江南小镇'
},
{
url: 'http://7xt8ri.com2.z0.glb.clouddn.com/pexels-photo-87257-medium.jpeg',
title: '苏州 | 闲庭信步里的云淡风轻'
},
{
url: 'http://7xt8ri.com2.z0.glb.clouddn.com/pexels-photo-medium.jpg',
title: '京都 | 信仰与现代世界的碰撞'
}
],
items: [
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: '鸟人彩色限量版',
price: '998'
},
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: '深蓝色的鸟 装饰画',
price: '950'
},
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: 'Binco 饮用水净化炭',
price: '998'
},
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: '鸟人彩色限量版',
price: '360'
},
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: 'Spot四角凳',
price: '268'
},
{
src: 'http://7xt8ri.com2.z0.glb.clouddn.com/QQ20160421-0@2x.png',
title: '鸟人彩色限量版鸟人彩色限量版',
price: '699'
}
]
}
}
});
/**
* Router
*/
Vue.use(VueRouter);
var App = Vue.extend({});
var router = new VueRouter();
router.map({
'/': {
component: vHome
},
'/home': {
component: vHome
}
});
router.start(App, '#page-home');
/**
* Page
*/
new Vue({
el: '#page-home'
});错误提示
蟹妖。
错误信息很明白，
<router-view>标签只能在router可用的应用中使用。
什么意思呢？就是说你当前应用的路由管理尚未生效。使用了vue-router以后得实例方式就不是直接'new Vue()'了，而是'Vue.start()'了。手机码字不方便，建议你查一下vue-router的文档，说得很明白。
希望对你有用
楼上两位+1
使用了 vue-router 就不需要实例化根组件了，route.start 会帮你实例化根组件。
new Vue 是不需要的，否则其中的路由标签不能被识别。