写一下我在测试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.onload=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>
问题就解决了。