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 看一遍,然后在写的时候, 遇到错误就查询解决:
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
注意:自定修改,并不能完美的解决代码问题;