通过对象而不是 url 路由器更改 Vue 视图

Question

使用 Vue.js 编写 chrome 扩展，我需要根据用户操作更改视图。

通常，我会使用 Vue 路由器自动将所有这些逻辑抽象出来......但是路由器绑定到 URL。

是否有可能以任何方式改变这种行为？

即，<router-view/> 正常位于App.vue，但是当用户点击扩展时，路由器不会在浏览器地址栏中查看 URL，而是说其他对象？

Answer 1

动态组件

Vue 路由器专门用于 url 栏。当您想根据其他一些数据切换视图组件时，可以使用dynamic components。它使用带有is 属性的<component> 标签：

<component :is="currentTabComponent"></component>

来自文档：

在上面的示例中，currentTabComponent 可以包含：

• 已注册组件的名称，或
• 组件的选项对象

这是一个演示，其中变量currentTabComponent 包含组件的名称：

new Vue({
  el: "#app",
  components: {
    Home: { template: `<div class="component"><h1>Home</h1> The home component</div>` },
    About: { template: `<div class="component"><h1>About</h1> An about component</div>` },
  },
  data() {
    return {
      currentTabComponent: 'Home'
    }
  },
  methods: {
    toggle() {
      this.currentTabComponent = this.currentTabComponent === 'Home' ? 'About' : 'Home';
    }
  }
});

.component {
  border: 3px solid #cccccc;
  margin: 10px;
  padding: 12px;
}

<div id="app">
  <component :is="currentTabComponent"></component>
  <button @click="toggle">Toggle</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>