Можно ли ссылаться на шаблон компонента как на файл в Vuejs?

Question

Я разрабатываю SPA, используя Flask и Vuejs. Я нашел Vuejs очень легкие рамки, поэтому я выбрал его. Но теперь я столкнулся с проблемой - у моего SPA есть несколько страниц или представлений, которые могут заменять друг друга при нажатии на разные ссылки. Я обнаружил, что компоненты Vue могут это сделать.

Действительно, я могу использовать

<router-view></router-view>

и Vue router работает отлично.

Но проблема в компонентах. Обычно в примерах я вижу что-то подобное:

const User = {
  template: '<div>User</div>'
}

Но это, вероятно, будет работать для очень маленьких приложений. В моем случае мои шаблоны очень большие и сложные HTML-разметки, поэтому я хочу, чтобы они были отделены от кода. В идеале это будет выглядеть так:

const User = {
  templatePath: 'user.html'
}

но я не могу понять, как это реализовать. Ранее я работал с AngularJS, и получить его было очень удобно и легко, но не сейчас.

Примечание: я не должен использовать Node.js, веб-пакет или что-либо еще, кроме Python и JavaScript.

Answer 1

Нет. Вы не можете указать vuejs загрузить шаблон во время выполнения со свойствами, такими как templateUrl.

VueJS Документ говорит

Думайте о компонентах, а не о шаблонах

Так что думайте о компонентах и ​​разбивайте свои большие шаблоны / логику на более мелкие компоненты, это должно решить проблему.

Если вы все еще не уверены, вы можете сделать одну вещь.

Разделите части js и css вашего компонента на соответствующие файлы. Теперь ваш компонент будет иметь только теги html и js / css. Нечто вроде ниже,

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Надеюсь, это поможет вам.