时间戳

首页 > 解决方案 > 如何在应用程序外部安装路由器链接？

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

问题描述

我正在使用指南/入门的基本教程，但将 HTML 代码更改为

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

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

但是，当然，它不起作用，我需要说 mount router-viewat #outApp，怎么做？

PS：什么时候#outApp里面#app 一切正常，在我的教程页面上复制。

标签： vue.js

解决方案

如前所述，请确保您已收到有关这种不切实际做法的通知。这是我为您提供的解决方案。

创建一个新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>

推荐阅读