Vue3全家桶笔记 - 目录导航

Vue3 笔记导航：

• 【1】🎯 前置准备和介绍（VsCode插件 + 组合式API和选项式API的比较）;
• 【2】🎯 声明响应式数据（ref + reactive + toRef + toRefs）；
• 【3】🎯 模板语法（指令+修饰符 + v-model语法糖）；
• 【4】🎯 侦听器；
• 【5】🎯 计算属性；
• 【6】🎯 组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）;
• 【7】🎯 生命周期;
• 【8】🎯 模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref）;

Vue-Router笔记导航：

• 【1】🎯 快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + 声明路由链接和出口）;
• 【2】重定向路由;
• 【3】🎯 嵌套路由【children】;
• 【4】🎯 路径参数;
• 【5】🎯 声明式导航 与 编程式导航（导航到不同位置 + 替换当前位置 + 路由历史）;
• 【6】🎯 导航守卫;

Pinia笔记导航：

• 🎯 安装与使用 + Store + State + Getters + Actions;

Axios 笔记导航

• 🎯 配置项 + 自定义创建实例 + 响应数据 + 请求错误处理 + 解决跨域;

重定向路由

• 在路由规则数组中，可采用 redirect 来重定向到另一个地址：
  • 通常是将 / 重定向到 某个页面；
• 示例展示：
  • router/index.js：

    import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
    
    // TODO 创建路由规则数组
    const routes = [
      {
        path: '/',
        // 路由重定向
        redirect: '/home'
      },
      {
        path: '/home',
        name: 'home',
        component: () => import('@/views/HomeVue.vue')
      },
      {
        path: '/blog',
        name: 'blog',
        component: () => import('@/views/BlogHomeVue.vue')
      }
    ]
    
    // TODO 创建路由
    const router = createRouter({
      // TODO 规定路由模式
      // history: createWebHashHistory(),
      history: createWebHistory(),
      routes
    })
    
    export default router
    

  • App.vue：

    <script setup>
    import { ref, reactive, computed, onMounted } from 'vue'
    
    onMounted(() => {});
    </script>
    
    <template>
    <!-- 路由链接，点击是路由地址会切换到属性 to 的地方 -->
      <router-link to="/">路由重定向 到 首页</router-link> | 
      <router-link to="/home">首页</router-link> | 
      <router-link to="/blog">博客</router-link>
    
      <hr>
    
      <!-- 路由试图，路由切换组件展示的地方，路由出口 -->
      <router-view />
    </template>
    

• 运行效果展示：