vue-router學習筆記(一)

時間 2019-12-13

標籤 vue router 學習筆記简体版

原文原文鏈接

今天照着vue-router官方文檔的demo，敲了一次，在本地運行的時候遇到了一個問題。
文檔demo地址：vue-router起步javascript

下面是個人所有代碼：html

<!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

我理解的意思大概是：不能新建一個會覆蓋全局屬性的變量'app'。到這裏我仍是不理解這個錯誤是怎麼回事。接着我很粗暴地谷歌了一下報錯信息：「can't create duplicate variable that shadows a global property」。發現stackoverflowy有位兄弟也遇到同樣的報錯。咱們的共同點就是，用了const定義常量。有我的給出的解決方法是，把const替換成var，可是沒有說明緣由。我立刻修改了個人代碼，把全部const都替換成var，問題竟然真的解決了。java

接着我去問了大神，獲得這樣的答案：const 和 var 是不同的，const 是常量，不能作任何修改，可是顯然 vue 是會在 app 上掛載一些屬性。也就是我修改了一個常量，瀏覽器固然會拋出錯誤。vue-router

那爲何在本地運行代碼纔會拋出錯誤呢？個人理解是這樣的：jsfiddle上有像Babel這樣的轉碼器將ES6代碼轉爲ES5代碼，但是個人本地運行的沒有，因此報錯。瀏覽器

以上~app