Question

我正在使用guide/Getting started的基本教程，但将HTML代码更改为

<div id="app">
  <!-- ... all the same except router-view ... -->
</div>

<h2>Outside:</h2>
<code id="outApp"><router-view></router-view></code>

但是，当然，它不起作用，我需要说router-view在#outApp，如何做？

PS：当#outApp位于#app内时，一切正常，在我的页面上再现教程。

Answer 1

如前所述，并确定您已收到有关此不切实际操作的通知。这是我为您提供的解决方案。

创建一个新的Vue实例（#app2）并在那里使用路由器。

Vue.config.productionTip = Vue.config.devtools = false // ignore
const router = new VueRouter({
  routes: [
{
  path: "/",
  component: { template: "<router-view/>" },
  children: [
    {
      path: "",
      name: "foo",
      component: { template: "<div>Foo</div>" }
    },
    {
      path: "bar",
      name: "bar",
      component: { template: "<div>Bar</div>" }
    }
  ]
}
  ]
});

// App1 without routing capabilities
new Vue({
  // router, don't need it here
  el: "#app1"
});

// App2
new Vue({
  router,
  el: "#app2"
});

<script src="https://unpkg.com/vue@2.5.16"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<fieldset>
  <legend>App1</legend>
  <div id="app1">
This is the app without router
  </div>
</fieldset>

<fieldset>
  <legend>App2</legend>
  <div id="app2">
<router-link :to="{name:'foo'}">Foo</router-link>
<router-link :to="{name: 'bar'}">Bar</router-link>
<hr>
<router-view></router-view>
  </div>
</fieldset>

如何在应用程序外部安装路由器链接？

1 个答案: