<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div> </body> <script type="text/javascript"> //创建模板 var Home = { template: `<div><h2>我是主页</h2></div>` } var News = { template: `<div><h2>我是新闻</h2></div>` } //配置路由，创建路由实例 var router = new VueRouter({ routes: [{ path: '/home', component: Home }, { path: '/news', component: News }, { path: '*', redirect:'/home' } ] }) new Vue({ router: router, el: '#box', }) </script> </html>非常简单的一个路由应用，认真看是什么问题都没有。认真想一下，其实这是vue-router.js加载不成功的原因，为什么？
因为html文档是从上到下按顺序解读的。
vue.js里面有加载路由器的一些方法。当浏览器先解读vue-route.js的时候就没有了前置条件，所以我们就需要把
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>写在
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
的后面。（以下）
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
问题就解决了。