vue-router 是否适用于内联模板？答案

【问题标题】：Does vue-router works with inline-templates?vue-router 是否适用于内联模板？
【发布时间】：2019-01-02 13:43:34
【问题描述】：

我正在尝试使用 vue-router 渲染使用内联模板的多个组件，但是一旦我定义了内联模板，无论 url 是什么，组件都会渲染。

inline-templates 是否与 vue-router 一起工作？

【问题讨论】：

是的，他们有。但是，这里没有代码，所以我们无法为您提供帮助。
我投票决定将此问题作为离题结束，因为此问题缺少任何可用于确定问题根源的信息。
可能想先查看文档，在询问之前，Github 存储库中甚至有示例。
@Anuga 你能分享一个来自 vuejs.org 文档的链接吗？据我所知，文档中没有提到使用 vue-router 和 inline-templates
文档中没有inline-template

【解决方案1】：

这真的取决于你所说的“工作”是什么意思。你可以像这样弗兰肯斯坦，它会做你想做的事而不会抛出任何错误，但我觉得我只是发布这个例子让世界变得更丑陋：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vue-router with inline-template</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-view>
      <foo inline-template id="foo"><div>foo</div></foo>
    </router-view>
  </div>

  <script>
    const Foo = { template: document.getElementById('foo').innerHTML };
    const Bar = { template: '<div>bar</div>' };
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
    ];
    const router = new VueRouter({
      routes,
    });
    var app = new Vue({
      el: '#app',
      router,
    });
  </script>
</body>
</html>

这几乎是来自 vuejs.org 的介绍性示例，其中一个模板已内联。

【讨论】：

【解决方案2】：

您可以使用 # 引用您的内联模板

const Foo = { template: '#my-foo-template' }

const routes = [
	{ path: '/foo', component: Foo },
];

&lt;foo inline-template id="my-foo-template"&gt; ... &lt;/foo&gt;

【讨论】：