vue-router学习笔记(一)

今天照着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代码,可是我的本地运行的没有,所以报错。

以上~


Judy is studying
工作经历与学习经历分享

正在努力成为一名还不错的前端工程师

298 声望
10 粉丝
0 条评论
推荐阅读
JavaScript模块化简述
大部分人可能都大概了解以上代码的意思是 导入(引用) or 导出一些代码块。但是大家有没有想过,同样是导入、导出功能,为什么一个项目中常常能同时看到import和 require呢?他们又有什么区别的呢?要回答这些问...

猪猪猪惠婷阅读 1.3k

掌握TypeScript:10个最佳实践提高代码质量
TypeScript 是一种强类型的 JavaScript 超集,提供了很多优秀的工具和语言特性,可以帮助开发者提高代码质量和开发效率。在本文中,我们将介绍 10 个 TypeScript 最佳实践,帮助初级和中级的 Web 前端开发工程师...

pingan87874阅读 1.4k

封面图
ES6 class extends
class 是对原型继承的一种语法糖的包装。那相对于原型继承,它有什么优点呢?我们来先看一个典型的基于原型链继承的例子。部分内容来自“Javascript高级程序设计”

anleo3阅读 2.5k评论 2

头脑风暴问题而不是想法
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智1阅读 1.1k

well-known Symbol ES6 暴露内部操作
ES5的一个中心主旨是将JavaScript中的一些“神奇”的部分暴露出来,并详尽定义了这些开发者们在当时模拟不了的功能。ES6延续了这个传统,新标准中主要通过在原型链上定义与Symbol相关的属性来暴露更多的语言内部逻...

anleo1阅读 2.5k

深入理解JavaScript——继承
JavaScript 的继承是基于原型实现,在前文 原型 里,笔者讲到了原型继承,并详细介绍了显式原型继承和隐式原型继承各自的两种方法。现在我们以继承的视角切入,并以案例的形式来介绍 8 种常见的 JavaScript 继承方法

山头人汉波2阅读 1.1k

TypeScript系列:【3】类
基础说明先来看个例子: {代码...} 这样,我们就定义了一个类,包含一个属性用于保存名称,一个构造器用于创建的时候设置名称,方法say用于获取名称描述: {代码...} 打印的结果就是:“你好,我是小强”。公共,私...

zxl200707011阅读 946

正在努力成为一名还不错的前端工程师

298 声望
10 粉丝
宣传栏