Как добавить маршрут в vue.js

Question

Я новичок в javascript и vue.js, и при попытке добавить новый маршрут в существующую программу я сталкиваюсь с некоторой проблемой.

Я создал свой новый компонент в отдельном файле с именем Miniature.vue

Я добавил новый маршрут в определение маршрутизатора:

  export default new Router({
  routes: [
    {
      path: '/certificat/:id',
      name: 'Certificat',
      component: Certificat
    },
    {
      path: '/miniature/:id',
      name: 'Miniature',
      component: Miniature
    }
  ]
})

И затем, в экземпляре vue, я добавил свои новые компоненты и обновил шаблон:

new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
            <Certificat></Certificat>
            <Miniature></Miniature>
            </div>'
})

Предыдущий шаблон был просто

template: '<Certificat/>'

Проблема в том, что URL-адрес либо mywebsite / Certificat / 123, либо mywebsite / miniature / 123, оба маршрута выполнены, и мои два компонента отображаются!Каково же назначение шаблона в конструкторе Vue?Если я удаляю его, ничего не происходит.

Что мне здесь не хватает ??

Answer 1

Эти компоненты должны быть загружены с вашего маршрута, поэтому их не должно быть в шаблоне вашего приложения (т. Е. Они должны быть удалены из #app 'components и template).

Ваше приложение должно содержать <router-view> где-то для рендеринга маршрута.В вашем случае замените строку шаблона приложения на <router-view/>.

Это должно выглядеть примерно так:

new Vue({
  el: '#app',
  router,
  template: '<router-view/>'
})

Следует отметить, что в настройках вашего маршрутизатора отсутствует маршрут для /и 404, поэтому путь по умолчанию и неизвестные маршруты ничего не отобразят в вашем приложении.Пользователи должны будут перейти к точным маршрутам, которые вы настроили, чтобы увидеть что-либо.

Answer 2

Vue не имеет встроенной маршрутизации, для маршрутизации вам понадобится пакет vue-router .

Чтобы лучше понять template и Vue в целомЯ рекомендую прочитать Руководство по внедрению