懂个锤子Vue VueRouter案例篇

原创

Java_慈祥

发布于 2024-08-05 03:43:11

840

发布于 2024-08-05 03:43:11

文章被收录于专栏：Web前后端、全栈出发

VueRouterProject案例：

🆗，上述我们大致学习了，VueRouter组件化开发，那么接下来就实现一个小小的Demo吧：

一个小型文章论坛系统：我们会用到组件化开发的技术，多页面切换、路由配置：

本篇Demo学习： 黑马程序员、使用涉及其官方接口API，关于接口使用就不过多介绍了；

项目涉及依赖：

yarn add vue-router@3.6.5

yarn add less-loader

yarn add axios

一、二级路由配置：

本次项目由：一、二级路由模块组成：

两个一级路由：首页 和 面经详情
首页： 内嵌四个可切换页面，嵌套二级路由：面经(默认路由)、收藏、喜欢、我的

面经： 页面，配置默认重定向，并在create钩子函数加载请求最近面试资料，渲染页面；

点击某个，资料项： @click="$router.push('/detail/${item.id}')跳转请求，面经详情，并传参；

面经详情，获取参数在： 在create钩子函数加载请求最近面试资料，渲染页面，点击< \ $router.back() 返回首页

一级路由配置： 在Vue项目中配置基本的路由映射，通常是最顶层的路由；

二级路由配置： 二级路由是在某个一级路由，对应的组件内部进一步定义的路由：

例如，在Layout组件内部，你可以添加子路由来实现二级导航，/src/router/index.js

在Layout组件内通过children属性来包含子路由定义子组件，比如article和collect

import Vue from 'vue'
import VueRouter from "vue-router";
//一级目录组件:
import Layout from '@/views/Layout';                //默认首页,并内重定向 article面经模块;
import ArticleDetail from '@/views/ArticleDetail';  //面经内容详情页;
//二级组件模块:
import Article from '@/views/children/Article';     //面经;
import Collect from '@/views/children/Collect';     //收藏;
import Like from '@/views/children/Like';           //喜欢;
import User from '@/views/children/User';           //我的;
Vue.use(VueRouter);

const router = new VueRouter({
  // /article 路径 → Article组件
  routes: [
    { 
      path: '/',
      component: Layout,
      redirect: '/article',
      // 通过 children 配置项，可以配置嵌套子路由
      // 在children配置项中，配规则
      // 准备二级路由出口
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like, },
        { path: '/user', component: User }
      ]
    },
    { path: '/detail/:id', component: ArticleDetail }
  ]
})
export default router;

在Layout组件模板中使用<router-view>，以渲染展示对应子路由的组件；

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 二级路由出口 -->
      <router-view></router-view>
    </div>
    <!-- 底部导航 -->
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>
<script>
  // 组件名,如果没有配置,默认: 文件名作为组件名;
  export default { name: 'LayoutPage', }
</script>

组件缓存 keep-aliv：

keep-alive 是Vue.js提供的一种机制，用于缓存不再活跃的组件实例，而不是销毁它们：

当组件被包裹在<keep-alive>标签内时，Vue会保留该组件的状态或避免重新渲染

这在需要频繁切换且状态需要保持的场景下特别有用：

比如选项卡、导航菜单中的页面切换等： ⬇️⬇️

问题： 从面经点到详情页，又点返回，数据重新加载了 → 所以无法定位到之前点击的位置了；

使用：keep-alive 将组件缓存下，避免组件数据重新加载，优化用户体验；

keep-alive的三个属性：

max：最多可以缓存多少组件实例
include：组件名数组，只有匹配的组件会被缓存
exclude：组件名数组，任何匹配的组件都不会被缓存

通过include和exclude属性来指定哪些组件应该被缓存，它们可以是字符串、正则表达式或数组；

keep-alive 的原理：

keep-alive的使用会触发两个生命周期函数：

activated 当组件被激活(使用) 的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

且组件缓存后就不会执行组件的created,mounted, destroyed 等钩子；

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 二级路由出口 -->
      <router-view></router-view>
    </div>
    <!-- 底部导航 -->
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>
<script>
  // 组件名,如果没有配置,默认: 文件名作为组件名;
  export default { 
    name: 'LayoutPage',
    // 组件缓存了，就不会执行组件的created，mounted，destroyed等钩子
    created () { console.log('created 组件加载了'); },
    mounted () { console.log('mounted dom渲染完了'); },
    destroyed () { console.log('destroyed 组件被销毁了'); },
    // 所以提供了 actived 和 deactived
    activated () { console.log('activated 组件被激活,看到页面了'); },
    deactivated () { console.log('deactivated 组件失活,离开页面了'); }
  }
</script>

VueCli 自定义创建项目：

Vue CLI自定义创建项目是一个灵活的过程，允许开发者根据项目需求选择和配置不同的特性：

此处简单介绍一下： 确保，安装脚手架 (已安装) npm i @vue/cli -g

创建项目： vue create 项目名 注意，不能有大小、特殊符号

选项： ←↑↓→ 按键选择、空格 选中、回车 下一步

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     				#选自定义,此处简单介绍一下,实际开发根据需求而定;

配置选项：

Vue版本：你可以选择Vue 2.x或Vue 3.x
Router：是否集成Vue Router
Vuex：是否集成状态管理库Vuex
CSS预处理器：如选择Sass、Less等
Progressive Web App (PWA)：是否创建PWA应用
Babel：用于编译ES6+代码到ES5，确保浏览器兼容性
Linter/Formatter：选择代码风格检查工具，如ESLint，并可配置格式化规则
Unit Testing和E2E Testing：是否集成单元测试和端到端测试框架

ESlint 代码规范，排错：

ESLint 是一个流行的JavaScript代码质量工具： 它帮助开发者遵循一致的编码标准，并检测潜在的代码错误；

在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则：

JavaScript 规范说明：

建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决：

字符串使用单引号 – 需要转义的地方除外 无分号 – 这没什么不好。不骗你！ 关键字后加空格 if (condition) { ... } 函数名后加空格 function name (arg) { ... } 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null

eslint 代码规范错误

如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你：

后面还有：英文的报错信息，并指定有错误的文件；
5:18 error 'App' is not defined no-undef 提示代码： 5行18列使用了未定义的App属性；

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码： 去 ESLint 规则表中查找其具体含义；

eslint插件-自动修正：

eslint会自动高亮错误显示、通过配置，eslint会自动帮助我们修复错误：

配置自动修复： vs-code设置: 打开设置文件,如下图:

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

注意：自定修改，并不能完美的解决代码问题；

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端框架