怎样用脚本修改router显示的控件

在Vue.js中，你可以通过JavaScript或Vue生命周期钩子来动态改变`router-view`所显示的组件。下面是一个基本的例子：

// 定义组件列表
const components = {
  ComponentA,
  ComponentB,
  ComponentC
}

// 创建Router实例
let router = new VueRouter({
  // ... 其他配置项
})

new Vue({
  router,

  data() {
    return {
      activeComponentKey: 'ComponentA'
    }
  },

  computed: {
    // 根据activeComponentKey计算显示的组件
    activeComponent() {
      return components[this.activeComponentKey];
    }
  },

  watch: {
    // 观察activeComponentKey的变化，并更新route
    activeComponentKey(newKey) {
      router.push({ name: newKey });
    }
  },

  render(h) {
    // 使用计算属性activeComponent返回当前要显示的组件
    return h('router-view', { component: this.activeComponent });
  }
})

在这个例子中，`activeComponentKey`表示要显示的组件名，当这个值变化时，`watch`会触发并导航到对应组件，同时`render`方法会更新`router-view`的内容。