时间戳

首页 > 解决方案 > 使用 typescript 在 vuejs 中为模板使用容器

javascript - 使用 typescript 在 vuejs 中为模板使用容器

问题描述

TL;博士

对于我的 Vuejs 项目，我总是将仪表板和内容分开。我创建了一个名为容器的目录来从那里呈现我的仪表板，并可能拥有多个仪表板。使用普通的 javascript，路由器可以完美地工作。

在代码沙箱中工作的链接：Js - 沙箱

问题是当我迁移到 typescript 时，路由器无法打开链接、显示错误、重复模板、无法返回或有时无法推送到其他视图。

我在 github 上发布了一个包含两个分支的存储库：master（使用 javascript）和 typescript-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')
    }
 ]

//App.vue

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

//容器/仪表板/Dashboard.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 和打字稿的代码相同的概念

标签： javascripttypescriptvue.jsvuejs2vue-router

解决方案

问题在于遵循建议从 vue-property-decorator 导入 Vue 和 Component 的教程

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

以上导致路由器无法正常工作，在阅读官方文档并使用时：

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

它完美无缺

感谢那些阅读

推荐阅读