今天照着vue-router官方文档的demo，敲了一次，在本地运行的时候遇到了一个问题。
文档demo地址：vue-router起步
下面是我的全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 创建router实例
const router = new VueRouter({
routes
})
// 创建和挂载根实例
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>说明：代码是没有bug，粘贴到jsfiddle运行是没有问题的。然后在本地运行的时候控制台报这样一个错：
我理解的意思大概是：不能新建一个会覆盖全局属性的变量'app'。到这里我还是不理解这个错误是怎么回事。接着我很粗暴地谷歌了一下报错信息：“can't create duplicate variable that shadows a global property”。发现stackoverflowy有位兄弟也遇到一样的报错。我们的共同点就是，用了const定义常量。有个人给出的解决方法是，把const替换成var，但是没有说明原因。我马上修改了我的代码，把所有const都替换成var，问题居然真的解决了。
接着我去问了大神，得到这样的答案：const 和 var 是不一样的，const 是常量，不能做任何修改，但是显然 vue 是会在 app 上挂载一些属性。也就是我修改了一个常量，浏览器当然会抛出错误。
那为什么在本地运行代码才会抛出错误呢？我的理解是这样的：jsfiddle上有像Babel这样的转码器将ES6代码转为ES5代码，可是我的本地运行的没有，所以报错。
以上~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。