项目初始化

路由

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