Используйте контейнеры для шаблонов в vuejs используя машинопись - PullRequest
Новая
       19

Используйте контейнеры для шаблонов в vuejs используя машинопись

0 голосов
/ 15 апреля 2020

TL; DR

Для моих проектов Vuejs я всегда разделяю панель управления и контент. Я создаю каталог под названием контейнеры, чтобы оттуда отображать свою панель мониторинга, с возможностью иметь несколько панелей мониторинга. При обычном javascript роутер работает отлично.

ссылка работает в codeandbox: Js - Песочница

Проблема в том, что когда я перехожу на машинопись, роутер дает сбой чтобы открыть ссылки, показать ошибки, продублировать шаблон, он не работает на go назад или иногда он не возвращает sh в другое представление.

Я разместил репозиторий в github с двумя ветвями: master (работает с javascript) и typScript-way (роутер не работает). Если я вручную ввожу в адресную строку или при перезагрузке (f5) каждый маршрут работает нормально, но при нажатии на ссылки он показывает ошибки

Далее я хочу показать, как он работает, используя javascript: 

src/
  - components/
  - containers/
    - dashboard/
      - layout/
        - Header.vue
        - Sidebar.vue
          ...
      - Dashboard.vue
  - router/
  - store/
  - views/
  - App.vue
  - main.js

// маршрутизатор. js

routes: [
    {
      path: '/',
      name: '',
      redirect: 'home',
      component: () => import('@/containers/dashboard/Dashboard'),
      children: [
        {
          path: '/home',
          name: 'home',
          component: () => import(/* webpackChunkName: "home" */ './views/Home')
        },
        {
          path: '/about',
          name: 'about',
          component: () => import(/* webpackChunkName: "about" */ './views/About')
        },
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "about" */ './views/Login')
    }
 ]

// Приложение. vue

<template>
 <div id="app">
    <router-view />
  </div>
</template>

// Контейнеры / Панель инструментов / Панель инструментов. vue 

<template>
    <div id="page-wrapper">
        <div id="page-container">
            <sidebar/>
            <div id="main-container">
                <header-app @sidebarToggle="sidebarToggle" @logout="logout" />
                <div id="page-content">
                    <router-view/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
.....
</script>

для машинописного текста Я использую ту же концепцию с кодом, адаптированным для vue и машинописным текстом

1 Ответ

0 голосов
/ 25 апреля 2020

Проблема заключалась в следовании руководству, в котором рекомендуется импортировать Vue и Компонент из vue -property-decorator 

import {Vue, Component} from "vue-property-decorator"

Приведенное выше описание приводит к некорректной работе маршрутизатора при чтении официальной документации. и используя: 

import Vue from "vue";
import Component from "vue-class-component";

отлично работает

благодаря тем, кто читает

...