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

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>

但是，当然，它不起作用，我需要说在#outApp 挂载router-view，怎么做？

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>