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 笔记导航

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

嵌套路由【children】

• 如果在路由视图中展示的组件包含自己的路由占位符（路由出口），则此处会用到嵌套路由；
• 如图所示：点击关于链接，则会展示About组件，在其组件中又包含了路由链接和路由占位符；
• 路由嵌套规则：
  • 某一个路由规则中采用 children 来声明嵌套路由的规则；
  • 嵌套路由规则中的 path 不能以 / 开头，访问需要使用过 /fatherPath/sonPath 的形式；
• 示例展示：
  • 路由模块 - router/index.js：

    import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
    
    // TODO 创建路由规则数组
    const routes = [
      {
        path: '/',
        // 路由重定向
        redirect: '/guoMan'
      },
      {
        path: '/teleplay',
        name: 'teleplay',
        component: () => import('@/views/Teleplay/index.vue'),
        children: [
          {
            path: 'teleplayList',
            name: 'teleplayList',
            component: () => import('@/views/Teleplay/components/TeleplayList.vue')
          }
        ]
      },
      {
        path: '/guoMan',
        name: 'guoMan',
        component: () => import('@/views/GuoMan/index.vue'),
        children: [
          {
            path: 'guoManList',
            name: 'guoManList',
            component: () => import('@/views/GuoMan/components/GuoManList.vue')
          }
        ]
      },
      {
        path: '/riMan',
        name: 'riMan',
        component: () => import('@/views/RiMan/index.vue'),
        children: [
          {
            path: 'riManList',
            name: 'riManList',
            component: () => import('@/views/RiMan/components/RiManList.vue')
          }
        ]
      },
      {
        path: '/movie',
        name: 'movie',
        component: () => import('@/views/Movie/index.vue'),
        children: [
          {
            path: 'movieList',
            name: 'movieList',
            component: () => import('@/views/Movie/components/MovieList.vue')
          }
        ]
      }
    ]
    
    // TODO 创建路由
    const router = createRouter({
      // TODO 规定路由模式
      // history: createWebHashHistory(),
      history: createWebHistory(),
      routes
    })
    
    export default router
    

  • 文档结构展示：
  • 只展示一个目录中的，其他目录的都一样：
    • views/GuoMan/index.vue

      <script setup>
      import { ref, reactive, computed, onMounted } from 'vue'
      
      onMounted(() => {});
      </script>
      
      <template>
        <h3>国漫</h3>
        <router-link to="/guoMan/guoManList" class="router-link">展示国漫列表</router-link>
        <hr>
        <router-view />
      </template>
      
      <style scoped>
      h3 {
        color: #fff;
        font-size: 30px;
        font-family: '隶书';
      }
      
      .router-link {
        padding: 0 10px;
        color: #fff;
        font-size: 24px;
        font-family: '隶书';
      }
      </style>
      

    • views/GuoMan/components/GuoManList.vue:

      <script setup>
      import { ref, reactive, computed, onMounted } from 'vue'
      let list = ref([
        {
          id: 'w45',
          title: '完美世界',
        },
        {
          id: 'y43',
          title: '一念永恒'
        },
        {
          id: 'z27',
          title: '赘婿'
        }
      ])
      onMounted(() => {});
      </script>
      
      <template>
        <ul>
          <li v-for="({id, title}) in list" :key="id"> {{ title }} </li>
        </ul>
      </template>
      
      <style scoped>
      li {
        list-style: none;
        padding: 0 10px;
        color: yellow;
        font-size: 24px;
        font-family: '隶书';
      }
      </style>
      

• 运行展示：