是否有一种方法可以使用模板直接在路由中创建一个vue 3组件?

Question

我很好奇，想尝试一下，我能在vue 3中创建一个路由吗，我直接在这里创建的组件是这样的?

const sampleComponent = {
template: `<section class='px-container py-20'>test</section>`
}
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition;
else return { top: 0 };
},
routes: [
{
path: "/",
name: "homepage",
component: sampleComponent
}
]
});

因为如果我试着喜欢这个，它不能在我的屏幕上产生任何东西。也许你们可以帮我解释一下，提前谢谢

Answer 1

即使这是可能的，你为什么要这样做?
.js文件"功能较弱";而不是.vue。
编译、导出或破解路由器没有直接好处。

通常的做法是使用组件，它们就是为这样的任务而存在的。
这里不需要创造性，遵循Vue建立的通用API实践。

再次，它可能是可行的(可能被黑客不知何故我猜)，但我不知道你会如何使用组合API,{{ }}语法或v-for在.js文件。

.vue文件非常灵活，可以让您在Vue上下文中实现完全相同的效果。

---

我只是想让你的生活从长远来看更容易，从一开始就不要使用太复杂的东西。
如果你有一个非常具体和高级的原因尽管有约定和关注点分离，但要在路由器中进行编译，你可以在Vue -router的Github的问题上找到那个问题，或者在Vue的discord上问这个问题。
但是如果你开始使用Vue，请遵循约定。

---

另外，如果你想要一些关于模板的高度动态的东西，Vue确实有渲染函数(JSX也是)。足够的灵活性。