Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【IE11】IE11で動かした時に、vue-routerの定義で「':'がありません」と怒られる【Vue】

【IE11】IE11で動かした時に、vue-routerの定義で「':'がありません」と怒られる【Vue】

f:id:duo-taro100:20160218004611p:plain

以前、嫁のために作成したWEBアプリ。
github.com

献立管理アプリですが、これはVue.jsとvue-routerを使用して作成しています。
嫁の会社のパソコンがIEしか入っていないということで、(chromeを入れろと言っても嫁にはわかりません。)IEで動作確認をしました。
すると、スクリプトエラーが2箇所ほど。

まずはindex.html
Vueインスタンスを作成して、routerを注入している箇所で怒られています。
下から4行目

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>りっちゃんの献立</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head>
<body>
    <div id="app">
        <div class="container">
            <headers></headers>
            <div class="construct">
                <div class="main">
                    <router-view></router-view>
                </div>
            </div><!-- .construct -->
            <footers></footers>
        </div><!-- .container -->
    </div>
</body>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/data.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/commonComponent.js"></script>
    <script src="js/mainComponent.js"></script>
    <script src="js/router.js"></script>
    <script>
        // Vueインスタンス作成
        var app = new Vue({
            el : "#app",
            router // エラー箇所!!!!!!!!!!!!!!!!!
        })
    </script>
</html>

もう一つはrouter.jsの中身。
ここでは、routerにroutesを注入する箇所で怒られています。

const Indexs = { template: '<indexs></indexs>' }
const Lists = { template: '<lists></lists>' }
const Regists = { template: '<regists></regists>' }
const Prepare = { template: '<prepares></prepares>' }

const routes = [
  // { path: '/', component: Indexs },
  { path: '/list', component: Lists },
  { path: '/regist', component: Regists },
  { path: '/prepare', component: Prepare },

  { path: '/', redirect: '/list' }
]

const router = new VueRouter({
  routes // エラー箇所!!!!!!!!!!!!!!!!!
})

エラーの内容を要約すると

書き方おかしい!!!

というものです。エラーとなっている箇所は、元々の書き方を省略している箇所です。

// エラーとなった実装
// Vueインスタンス作成
var app = new Vue({
    el : "#app",
    router // エラー箇所!!!!!!!!!!!!!!!!!
})


// 省略しない書き方
// Vueインスタンス作成
var app = new Vue({
    el : "#app",
    router : router // 省略しないとこのように書く
})
// エラーとなった実装
const router = new VueRouter({
  routes // エラー箇所!!!!!!!!!!!!!!!!!
})

// 省略しない書き方
const router = new VueRouter({
  routes : routes// 省略しないとこのように書く
})

IEではこの省略を許していないようです。
edgeは試してないのでわからないけど、大丈夫だと信じたい。
IEについてもIE11でしか確認してません。

それからIE11ではローカル環境で動かしているアプリのlocalstorageは使用できないみたいです。
localstorageオブジェクトが取得できなかった。
サーバー経由ではきちんとできました。
IEは使うな、っていうことがわかりました。