vue.js - vue-router 是否与内联模板一起使用?

标签 vue.js vue-router

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

内联模板是否可以与 vue-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 的介绍示例将其中一个模板制成内联。

关于vue.js - vue-router 是否与内联模板一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51523962/

相关文章:

vue.js - 当我使用 v-for 迭代可迭代对象时,vuejs 崩溃了

javascript - 如何以大写形式显示列表中的项目?

javascript - 如何测试从 VueX 观察计算属性的 Vue 观察者?

javascript - ant-design 复选框和表格如何结合?

javascript - 如何在 Vue.js 中获取 url 面包屑中的路径参数

javascript - 安装自定义 VueJs 插件的正确方法

vue.js - Vue test-utils 如何测试 router.push()

javascript - 仅使用 NUXT.js 生成静态 html

vue.js - Vuejs 对选择下拉元素进行测试

typescript - 如何将 typescript 对象传递给 Vue 组件