时间戳

首页 > 解决方案 > vue-router 是否适用于内联模板？

vue.js - vue-router 是否适用于内联模板？

问题描述

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

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

标签： vue.jsvue-router

解决方案

这实际上取决于您所说的“工作”是什么意思。你可以像这样的科学怪人，它会做你想做的事而不会抛出任何错误，但我觉得我只是发布这个例子让世界变得更丑陋： 

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

推荐阅读