weex中，使用router-view之后，在playground中打开变空白了

Question

3月5日新情况

将原来的router.js写法进行了修改，现在playground里面运行不会一片空白了，但是初始的router-view无法显示，只有在点击后路由跳转了才正常显示，请问是什么原因？

入口js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';

import index from './components/index.vue';
import index2 from './components/index2.vue';

Vue.use(VueRouter);//转载插件

Vue.config.silent = false;
Vue.config.devtools = true;

const router=new VueRouter({
    routes:[
        {
            path:'/',
            component: index
        },
        {
            path:'/a',
            component: index2
        }
    ]
});

new Vue(Vue.util.extend({ el: '#root', router}, App))

入口vue

<template>
  <div class="container" @androidback="back">
      <text class="message">{{ message }}</text>
      <text class="quotes">{{ quotes }}</text>
      <text class="link" v-for="nav in navData" :key="nav.id" @click="routerChange(nav.url)">{{ nav.name }}</text>
      <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Welcome to Use Weexpack!',
        quotes: 'A Tool To Build WEEX Faster',
        navData: [
          {
            id: 0,
            name: 'page1',
            url: '/'
          },
          {
            id: 1,
            name: 'page2',
            url: '/a'
          }
        ]
      };
    },
    methods: {
      routerChange(url){
        this.$router.push({
          path: url
        });
      },
      back: function () {
        this.$router.back()
      }
    }
  }
</script>

weex debug结果

[undefined:6:43] ReferenceError: Can't find variable: window
anonymous
[e-mail]:3:31709
main.js:7:1121

问题

一开始使用的是https://zhuanlan.zhihu.com/p/...的初始架构，在其基础上增加vue-router，但是一把router-view加进去在playground中跑就变成一片空白了

这是index.vue的代码

<template>
  <div class="container">
      <text class="message">{{ message }}</text>
      <text class="quotes">{{ quotes }}</text>
      <text class="link" v-for="nav in navData" :key="nav.id" @click="routerChange(nav.url)">{{ nav.name }}</text>
      <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Welcome to Use Weexpack!',
        quotes: 'A Tool To Build WEEX Faster',
        navData: [
          {
            id: 0,
            name: 'page1',
            url: '/'
          },
          {
            id: 1,
            name: 'page2',
            url: '/a'
          }
        ]
      };
    },
    methods: {
      routerChange(url){
        this.$router.push({
          path: url
        });
      }
    }
  }
</script>

还有app.js的代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routers';
import App from './index.vue'

Vue.use(VueRouter);//转载插件

Vue.config.silent = false;
Vue.config.devtools = true;

const route=new VueRouter({
    routes:router,
    base:__dirname
});

new Vue({
  el: '#root',
  router:route,
  render: h => h(App)
})

浏览器上面是可以跑的，路由切换也没问题，但是就是playground上面空白，请问是什么原因？

Answer 1

使用如下代码测试一下

new Vue(Vue.util.extend({
    el: '#root',
    router
}, App))

Answer 2

问题都解决了，对于初始router-view的不显示，只要在初始页面的生命周期中添加跳转就好了，谢谢大家