Vue.js
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

vue-router学习笔记(一)

发布时间：2019-05-28 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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运行是没有问题的。然后在本地运行的时候控制台报这样一个错：

vue-router学习笔记(一)

我理解的意思大概是：不能新建一个会覆盖全局属性的变量'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代码，可是我的本地运行的没有，所以报错。

以上~

脚本宝典总结

以上是脚本宝典为你收集整理的vue-router学习笔记(一)全部内容，希望文章能够帮你解决vue-router学习笔记(一)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：Vue
猜你在找的Vue.js相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程
热门Vue.js教程