【IE11】IE11で動かした時に、vue-routerの定義で「':'がありません」と怒られる【Vue】
以前、嫁のために作成した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は使うな、っていうことがわかりました。