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

Question

我正在使用指南/入门的基本教程，但将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>