Question

我正在尝试使用vue-router渲染使用内联模板的多个组件，但是一旦定义了内联模板，无论URL如何，该组件都会呈现。

inline-templates是否可以与vue-router一起使用？

Answer 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的介绍性示例，其中一个模板被内联。

Answer 2

您可以使用＃

引用内联模板

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

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

<foo inline-template id="my-foo-template"> ... </foo>

vue-router是否可以与内联模板一起使用？

2 个答案: