<router-view> can only be used inside a router-enabled app.

Question

第一次尝试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">&#xe61f;</a>
        <div class="search-bar-input">
            <label for="search"><i class="iconfont">&#xe61d;</i> 搜索</label>
            <input id="search" type="search">
        </div>
        <a href="profile.html" class="search-bar-login">
            <i class="iconfont">&#xe61e;</i>&nbsp;<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/[e-mail]',
                    title: '鸟人彩色限量版',
                    price: '998'
                },
                {
                    src: 'http://7xt8ri.com2.z0.glb.clouddn.com/[e-mail]',
                    title: '深蓝色的鸟 装饰画',
                    price: '950'
                },
                {
                    src: 'http://7xt8ri.com2.z0.glb.clouddn.com/[e-mail]',
                    title: 'Binco 饮用水净化炭',
                    price: '998'
                },
                {
                    src: 'http://7xt8ri.com2.z0.glb.clouddn.com/[e-mail]',
                    title: '鸟人彩色限量版',
                    price: '360'
                },
                {
                    src: 'http://7xt8ri.com2.z0.glb.clouddn.com/[e-mail]',
                    title: 'Spot四角凳',
                    price: '268'
                },
                {
                    src: 'http://7xt8ri.com2.z0.glb.clouddn.com/[e-mail]',
                    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'
});

错误提示

Answer 1

蟹妖。
错误信息很明白，

<router-view>标签只能在router可用的应用中使用。

什么意思呢？就是说你当前应用的路由管理尚未生效。使用了vue-router以后得实例方式就不是直接'new Vue()'了，而是'Vue.start()'了。手机码字不方便，建议你查一下vue-router的文档，说得很明白。

希望对你有用

Answer 2

使用了 vue-router 就不需要实例化根组件了，route.start 会帮你实例化根组件。
new Vue 是不需要的，否则其中的路由标签不能被识别。

Answer 3

楼上两位+1

Answer 4

继续楼上+1