Как лучше всего создать основную навигацию, которая будет ссылаться на компоненты Dynami c с помощью vue js? - PullRequest
Новая
       10

Как лучше всего создать основную навигацию, которая будет ссылаться на компоненты Dynami c с помощью vue js?

0 голосов
/ 03 августа 2020

Я хочу создать одностраничное приложение, в котором основная навигационная система загружает только один раздел за раз. В Vue так много способов обновления данных, поэтому мне нужно убедиться, что я подхожу к этому правильно и не вызовет проблем в будущем. Я также не хочу зависеть от vue CLI, поскольку это небольшое приложение.

Для простоты основная навигация будет такой: я бы создал основной контейнер для приложения и компонента. тег для Dynami c компонентов. 

<div id="app">
<nav>
  <a v-on:click="component ='home'">Home</a>
  <a v-on:click="component = 'about'">About</a>
  <a v-on:click="component = 'contact'">Contact</a>
</nav>
  <component :is="component"></component>
  
</div>

Я бы зарегистрировал основное приложение и компоненты с их содержимым. (здесь упрощено). 

Vue.component("home",{
    template : '<h1>Home</h1>'
});

Vue.component("about",{
    template : '<h1>About</h1>'
});

Vue.component("contact",{
    template : '<h1>Contact</h1>'
});
new Vue({
  el: "#app",
  data: {
  component: 'home'

  }
})

это пример, но в реальном приложении каждый раздел будет иметь намного больше HTML и CSS, а также vue привязок. Это правильный подход к использованию компонентов Dynami c? Вы просто запихиваете все свои html в объект шаблона? Я все еще хватаюсь за многие вещи, например прорези и реквизит, поэтому не уверен, делаю ли я здесь ошибку с ладьей ie.

...