写一下我在测试Vue路由所遇到的坑，上面是浏览器提示的错误。这个让我感觉很纳闷啊！我已经把vue-router.js和vue-.js导进来了，开始为什么会报这样的错误呢？下面是我的代码。
<!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文档是从上到下按顺序解读的。
就好像我们写在<body>前面<script>一样需要先window.οnlοad=function ( ){ }
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>问题就解决了。
版权声明：本文为qq_36963873原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。