手機QQ瀏覽器不支持vue.js對象參數縮寫

最近正要用vue.js寫個頁面，非模塊化開發，直接在頁面script引入vue.js和vue-router.js，在 chrome 顯示好好的，小米自帶的瀏覽器也是正常的，而後到了手機QQ瀏覽器就出問題了。

官方文檔：https://router.vuejs.org/zh-c...

官方示例修改

html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 經過傳入 `to` 屬性指定連接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <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/template" id="foo">
    <div class="">這裏是foo</div>
</script>
<script type="text/template" id="bar">
    <div class="">這裏是bar</div>
</script>

javascript

// 1. 定義（路由）組件。
// 這裏把 template 放到了 html 裏去，用 script 標籤存放着，調用的時候用 #{id}，.{class}我沒試過，不知道行不行
const Foo = { template: '#foo' };
const Bar = { template: '#bar' };

// 2. 定義路由
// 從上一個就應該開始注意了，const 語句後面要加分號「;」
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes: routes // 官方文檔寫着能夠用縮寫形式只寫 routes，而後在手Q瀏覽器是不行的，必須 key: value 的形式存在。
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router: router    // 這裏一樣是必須 key: value 形式，否則運行不起來
}).$mount('#app');

// 如今，應用已經啓動了！

在 html 裏寫模板

使用 const Foo = { template: '<div>foo</div>' } 這種在 script 裏寫模板 html 很不方便，特別是內容比較多的時候，遇到換行還會報錯，要行全寫一行，要麼是用 + 號鏈接起來。

也是在 vuejs的組件中該如何引用一個html模板而不是片斷? 上看到 @dososo 指點的方法，果真很贊！

通過上面的一番改造，終於能夠兼容手Q瀏覽器了~