Vue进阶之Vue无代码可视化项目（二）

Vue无代码可视化项目

项目初始化
- 路由
- - 子路由
  - - 错误示范
    - 正确示范
    - - App.vue
      - router/index.ts
      - AboutView.vue
      - AboutAboutview.vue
      - router/index.ts
  - 项目路由
  - - router/index.ts
    - App.vue
    - ActionsView.vue
    - DataSourceView.vue
    - LayoutView.vue
  - 路由样式
  - - App.vue
  - 进一步的
  - - App.vue

项目初始化

路由

router
- index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { h } from 'vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue')},{path: '/dataSource',name: 'dataSource',component: () => h('div', 'dataSource')},{path: '/layout',name: 'layout',component: () => h('div', 'layout')},{path: '/actions',name: 'actions',component: () => h('div', 'actions')}]
})export default router

在这里插入图片描述

子路由

错误示范

{path: '/layout',name: 'layout',component: () => {useRouter().push('/actions') //在路由逻辑处理的地方不能写这代码// 路由分类：配置式、约定式// 目前是配置式return h('div', 'layout')}
},

原因：

路由一般分为两种：配置式、约定式
目前使用的是配置式（json形式）
约定式：按照文件夹-路由结构来组织的这种形式

正确示范

App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><header><div class="wrapper"><HelloWorld msg="You did it!" /><nav><!-- RouterLink --><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><!-- Vue Router,RouterLink、RouterView --><RouterView />
</template><style>
header {background-color: #3efdb7b8;align-items: center;justify-content: center;text-align: center;
}