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