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;
}