【Vue第6-7章】vue-router与Vue UI组件库_Vue2

news2024/11/29 22:43:31

目录

第6章 vue-router

6.1 相关理解

6.1.1 vue-router的理解

6.1.2 对SPA应用的理解

6.1.3 路由的理解

6.2 基本路由

6.2.1 效果

6.2.2 总结:编写使用路由的3步

6.2.3 笔记与代码

6.2.3.1 笔记

6.2.3.2 30_src_路由的基本使用

6.3 嵌套(多级)路由

6.3.1 笔记与代码

6.3.1.1 笔记

6.3.1.2 31_src_多级路由

6.4 路由传参

6.4.1 笔记与代码

6.4.1.1 笔记

6.4.1.2 32_src_路由的query参数

6.5 路由命名、参数与配置

6.5.1 笔记与代码

6.5.1.1 笔记

6.5.1.2 33_src_命名路由

6.5.1.3 34_src_路由的params参数

6.5.1.4 35_src_路由的props配置

6.5.1.5 36_src_router-link的replace属性

6.6 编程式路由导航

6.6.1 笔记与代码

6.6.1.1 笔记

6.6.1.2 37_src_编程式路由导航

6.6.1.3 38_src_缓存路由组件

6.6.1.4 39_src_两个新的生命周期钩子

6.7 路由守卫

6.7.1 笔记与代码

6.7.1.1 笔记

6.7.1.2 40_src_全局路由守卫

6.7.1.3 41_src_独享路由守卫

6.7.1.4 42_src_组件内路由守卫

6.8 路由器的两种工作模式

6.8.1 前端项目打包与部署

6.8.1.1 打包

6.8.1.2 部署

6.8.2 笔记与代码

6.8.2.1 笔记

6.8.2.2 43_src_history模式与hash模式

第7章 Vue UI组件库

7.1 移动端常用UI组件库

7.2 PC端常用UI组件库

7.3 44_src_element-ui组件库


第6章 vue-router

6.1 相关理解

生活中的路由为了实现多台设备同时上网:

编程中的路由为了实现SPA应用(单页面应用):

原理:

6.1.1 vue-router的理解

6.1.2 对SPA应用的理解

6.1.3 路由的理解

6.2 基本路由

6.2.1 效果

6.2.2 总结:编写使用路由的3步

6.2.3 笔记与代码

6.2.3.1 笔记

6.2.3.2 30_src_路由的基本使用

6.3 嵌套(多级)路由

6.3.1 笔记与代码

6.3.1.1 笔记

6.3.1.2 31_src_多级路由

6.4 路由传参

6.4.1 笔记与代码

6.4.1.1 笔记

跳转路由并携带query参数,to的字符串写法(模板字符串里想混着JS的变量):

加了冒号: 所有绿色框里的东西都被当成JS去解析,解析发现是模板字符串,而且里面混着JS变量

跳转路由并携带query参数,to的对象写法:

6.4.1.2 32_src_路由的query参数

6.5 路由命名、参数与配置

6.5.1 笔记与代码

6.5.1.1 笔记

6.5.1.2 33_src_命名路由

6.5.1.3 34_src_路由的params参数

6.5.1.4 35_src_路由的props配置

6.5.1.5 36_src_router-link的replace属性

代码略

6.6 编程式路由导航

6.6.1 笔记与代码

6.6.1.1 笔记

6.6.1.2 37_src_编程式路由导航

6.6.1.3 38_src_缓存路由组件

6.6.1.4 39_src_两个新的生命周期钩子

6.7 路由守卫

6.7.1 笔记与代码

6.7.1.1 笔记

6.7.1.2 40_src_全局路由守卫

6.7.1.3 41_src_独享路由守卫

6.7.1.4 42_src_组件内路由守卫

6.8 路由器的两种工作模式

6.8.1 前端项目打包与部署

6.8.1.1 打包

将前端项目打包成html,css,js文件:通过npm run build命令,生成dist目录(dist有打包的意思),dist目录中有css,js,html和网站页签图标favicon.ico。

打包的时候只关注src目录和public目录,其他会忽略

6.8.1.2 部署

拿nodejs使用express框架现场搭建微型服务器,把css,js,html,favicon.ico部署上去

6.8.2 笔记与代码

6.8.2.1 笔记

6.8.2.2 43_src_history模式与hash模式

第7章 Vue UI组件库

7.1 移动端常用UI组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io
NutUI(京东团队)

7.2 PC端常用UI组件库

1. Element UI https://element.eleme.cn (饿了么团队)
2. IView UI https://www.iviewui.com

7.3 44_src_element-ui组件库

element-ui完整引入太大了,采用按需引入

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1318106.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

股票价格预测 | Python实现基于ARIMA和LSTM的股票预测模型(含XGBoost特征重要性衡量)

文章目录 效果一览文章概述模型描述源码设计效果一览 文章概述 Python实现基于ARIMA和LSTM的股票预测模型(Stock-Prediction) Data ExtractionFormatting data for time seriesFeature engineering(Feature Importance using X

MX6ULL学习笔记(十二)Linux 自带的 LED 灯

前言 前面我们都是自己编写 LED 灯驱动,其实像 LED 灯这样非常基础的设备驱动,Linux 内 核已经集成了。Linux 内核的 LED 灯驱动采用 platform 框架,因此我们只需要按照要求在设备 树文件中添加相应的 LED 节点即可,本章我们就来学…

vue-cli创建一个vue3项目

通过命令创建VUE脚手架: npm install -g vue/cli 创建VUE项目: vue create npg***b 剩下的就是一路回车 npm install element-plus --save 入口文件main.ts import { createApp } from vue import App from ./App.vue import router from ./router…

【第3期】Springboot集成SpringSecurity+RSA+ECS免密登录

本期简介 RSA是非常安全的非对称加解密算法,单纯的RSA的原理和使用网络资料较多,本期不细讲RSA的原理,主要讲解实战,如何与SpringbootSpringSecurity集成起来,做到在安全框架基础上,对用户的密码进行加密存…

(2)Linux 操作系统||基本创建与操作

本章将浅谈一下 "操作系统是什么" 的问题,随后通过讲解一些 Linux 下的基本指令,显示目录内容、跳转操作和文件的创建与删除。在讲解的同时我会穿插一些知识点,比如 Linux 隐藏文件、路径等基础知识。 了解操作系统 什么是操作系统…

电子学会C/C++编程等级考试2021年09月(六级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:双端队列 定义一个双端队列,进队操作与普通队列一样,从队尾进入。出队操作既可以从队头,也可以从队尾。编程实现这个数据结构。 时间限制:1000 内存限制:65535输入 第一行输入一个整数t,代表测试数据的组数。 每组数据的…

桌面概率长按键盘无法连续输入问题

问题描述:概率性长按键盘无法连续输入文本 问题定位: 系统按键流程分析 图一 系统按键流程 按键是由X Server接收的,这一点只要明白了X Window的工作机制就不难理解了。X Server在接收到按键后,会转发到相应程序的窗口中。在窗…

海洋可视化大屏,Photoshop源文件

数据大屏通过实时的数据展示,可及时发现数据的变化和异常,以便及时采取措施。现分享海洋动力大数据监控、海洋数据监控系统、科技感海洋监控系统大屏模版的UI源文件,供UI设计师们快速获取PSD源文件完成工作 若需更多 大屏组件,请…

基于linux系统的Tomcat+Mysql+Jdk环境搭建(一)vmare centos7 设置静态ip和连接MobaXterm

特别注意,Windows10以上版本操作系统需要下载安装VMware Workstation Pro16及以上版本,安装方式此处略。 (可忽略 my*** 记录设置的vamare centos7 账号root/aaa 密码:Aa123456 ) 1、命令行和图形界面切换 如果使用的是VMware虚拟机&…

用Java实现根据数据库中的数量,生成年月份+序号递增

在日常开发中,经常会遇到根据年月日和第几号文件生成对应的编号,今天给大家提供一个简单的工具类 public static final Long CODE1L;/*** param select 数据库中数据总数* return*/public static String SubjectNo(Long select){// 在总数的基础上1&…

C#有望成为2023年的编程语言之王

前言 TIOBE 2023年12月编程语言指数头条新闻:C#有望成为2023年的编程语言之王。 TIOBE是什么? 访问地址:https://www.tiobe.com/tiobe-index/ TIOBE是一个编程社区指数,用于衡量不同编程语言的受欢迎程度。TIOBE指数基于全球范围…

t-SNE高维数据可视化实例

t-SNE:高维数据分布可视化 实例1:自动生成一个S形状的三维曲线 实例1结果: 实例1完整代码: import matplotlib.pyplot as plt from sklearn import manifold, datasets """对S型曲线数据的降维和可视化"&q…

根据星历文件实现卫星的动态运行模拟matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .................................................................................... % …

算法竞赛备赛进阶之树形DP训练

目录 1.树的最长路径 2.树的中心 3.数字转换 4.二叉苹果树 5.战略游戏 6.皇宫守卫 树形DP是一种动态规划方法,主要用于解决树形结构的问题。在树形DP中,通常会使用动态规划的思想来求解最优化问题。其核心在于通过不断地分解问题和优化子问题来解决…

CSS篇之圆角梯形

附上一篇文章&#xff1a;梯形tab按钮-基于clip-path path函数实现 - JSRUN.NET 他这个区别在于&#xff0c;收尾两侧都是直角的&#xff0c;如图 下面这个是圆角&#xff1a; 思路&#xff1a; 代码如下&#xff1a; <template><div class"wrap"><…

Kali Linux安装Xrdp远程桌面工具结合内网穿透实现远程访问Kali桌面

文章目录 前言1. Kali 安装Xrdp2. 本地远程Kali桌面3. Kali 安装Cpolar 内网穿透4. 配置公网远程地址5. 公网远程Kali桌面连接6. 固定连接公网地址7. 固定地址连接测试 前言 Kali远程桌面的好处在于&#xff0c;它允许用户从远程位置访问Kali系统&#xff0c;而无需直接物理访…

Lit官方入门示例

陈拓 2023/12/17-2023/12/17 1. 简介 在《用Vite构建Lit项目》 https://blog.csdn.net/chentuo2000/article/details/134831884?spm1001.2014.3001.5501 一文中我们介绍了怎样用Vite构建Lit项目。 本文我们介绍不依赖Vite的Lit入门示例。 我的开发环境还是和上文相同。 …

Vue3+hooks快速接入Lodop打印插件

文章目录 前言一、下载并修改LodopFuncs.js1.1 调整LodopFuncs.js代码&#xff0c; 暴露 getLodop 二、自定义useLodop hooks抽取共用的lodop逻辑CheckLodopIsOkgetPrinterArrprintLabelprintA4Paper 总结 前言 上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打…

蓝桥杯专题-真题版含答案-【骑士走棋盘】【阿姆斯壮数】【Shell 排序法 - 改良的插入排序】【合并排序法】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

字符迷宫(期末考模拟题)

很有趣的一道题 难点主要在于对于 * 的处理 题目描述的是可以多次匹配相同的字母&#xff0c;这就涉及到两个方面&#xff1a; 一是这个匹配的相同的字母如何储存 二是当你’ * ‘位置递归结束的时候&#xff0c;你该什么时候变回‘ * ’号 这里给出我的思路&#xff0c;如…