项目初始化

路由

• 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')}
},

原因：

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

正确示范

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