我正在尝试使用 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/