Vue中的脚手架和路由
私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!
系列文章目录
前端系列文章——传送门
后端系列文章——传送门
文章目录
- 私人博客
- 系列文章目录
- 脚手架和路由
- 脚手架
- 概念
- 脚手架的使用
- 项目目录结构
- 项目运行
- 单文件组件
- eslint规范
- 路由
- 介绍
- 前端路由实现
- hash模式
- history模式
- VueRouter
- 基本使用
- 导航方式
- 声明式导航
- 编程式导航
- 命名路由
- 路由重定向
- 路由嵌套
- 404路由
- 动态路由匹配
- 注
脚手架和路由
脚手架
概念
脚手架是为了更加快速的架构整个项目的结构和基础业务,开发者开发出来的一个工具。利用该工具可以执行一行命令就将项目的结构以及基础的业务架构好。
express有脚手架,可以快速搭建后端接口项目的结构,以及基础的用户请求模块。。。
vue也有vue的脚手架,可以快速搭建vue项目的结构和基础业务。。。
vue的脚手架:
- vue-cli - 旧版,现在基本不用
- @vue/cli - 新生代,现在还有很多在用,也有人在用更新的
脚手架的使用
下载安装:
npm i @vue/cli -g
检查版本:
vue --version # 简写 vue -V(大写)
创建项目:
vue create 项目名称(用英文)
当使用npm多次下载失败的时候,cnpm比npm牛逼,yarn更牛逼,用流量是万能的。
项目目录结构
public存放了一个现在正运行的index.html,不要改动
src项目主要文件夹:
assets存放静态资源的文件夹
components存放所有组件的文件夹
App.vue根组件,将来我们自己写的其他组件最终都会在这个根组件中显示
main.js项目入口文件,默认显示根组件是这个文件配置的
项目运行
进入项目目录执行命令:
npm run serve
这个命令是在开发阶段使用的,我们看到的页面是将代码打包到内存中运行的。
当项目开发完成以后,项目需要打包,将打包好的文件上线,此时需要执行打包命令:
npm run build
单文件组件
vue项目其实是一个单页面应用程序,所有的文件互相引入,最终都被引入到了一个文件中main.js中,然后这个文件被打包好,引入到public下的index.html中使用。
我们通过脚手架创建的项目结构中,src文件夹下大多都是vue后缀的文件,这种文件其实都被引入到其他文件中使用了,一个vue文件属于一个独立的组件,我们称之为单文件组件。
单文件组件中要求要有3部分内容:
- emplate标签 - 写html结构
- script标签 - 写当前组件中的逻辑
- style标签 - 写当前组件中的样式
例如:App.vue
eslint规范
- 每行结束不允许加分号
- 函数定义的小括号左右要有空格
- 分支语句的小括号和大括号左右要有空格
- 箭头函数的箭头和小括号以及大括号左右要有空格
- 键值对的冒号和值之间要有空格
- 循环语句的小括号和大括号左右要有空格
- for循环语句小括号中的三要素之间要有空格
- js中所有引号使用单引号
- 运算符左右要有空格
- template、script和style标签之间要有空行
- 所有导入文件的语句要放在代码最前面
- 缩进等同于2个空格,不能是1个和4个
- 数组和对象的值之间要有空格
- 文件末尾要有空行
路由
介绍
路由指的是页面显示的内容跟请求使用的路径之间的对应关系。例如:我们在nodejs后端项目中,指定某个路径来请求,响应对应的内容,就叫路由。
路由分为两种:前端路由和后端路由。
后端通过请求路径和内容对应,前端路由通过事件触发控制不同的内容显示。
前端路由实现
前端路由通常有两种:hash模式和history模式。
hash模式
hash使用锚点控制不同的内容显示。
页面监听锚点变化,当锚点发生变化的时候,让对应的内容显示。事件名 - hashchange
例:
<body><a href="#/index">首页</a><hr><a href="#/list">列表页</a><hr><a href="#/detail">详情页</a><hr><div id="route-view"></div>
</body><script type="text/javascript">// 获取元内容素var ctn = document.getElementById('route-view')// 默认渲染render('/index')// 监听hashchange事件window.addEventListener('hashchange',function(){render(location.hash.slice(1))})function render(router){switch (router) {case '/index':ctn.innerHTML = '这是首页'break;case '/list':ctn.innerHTML = '这是列表页'break;case '/detail':ctn.innerHTML = '这是详情页'break;default:ctn.innerHTML = '404页面'break;}}
</script>
history模式
history模式通过监听历史记录切换,然后更改当前地址实现路由跳转。事件类型 - popstate。
改变当前地址 - history.pushState()
例:
<body>
<button class="index" href="/index">首页</button>
<button class="list" href="/list">列表页</button>
<button class="detail" href="/detail">详情页</button>
<div id="app">内容区域
</div>
</body>
<script>
var btns = document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){btns[i].onclick = function(){var link = this.getAttribute('href')history.pushState({link},null,link)render(link)}
}
function render(link){switch(link){case '/index':app.innerHTML = '<h1>这是首页</h1>';break;case '/list':app.innerHTML = '<h1>这是列表页</h1>';break;case '/detail':app.innerHTML = '<h1>这是详情页</h1>';break;}
}
window.addEventListener('popstate',(e)=>{console.log(666);render(location.pathname)
})
render('/index')
</script>
注意:对于历史记录的监听和更改,必须在服务器环境访问有效。
VueRouter
vue-router是vue.js官方提供的路由管理器,让vue在实现单页面应用程序的时候,变得更加简单。作用就是指定当前是哪个锚点,需要在页面加载哪个组件。提供一套指路的路由规则。
基本使用
下载安装:
npm i vue-router
在src中新建router文件夹,用于写路由文件。在router中新建index.js来创建路由配置文件:
// 1.导入vue和vue-router
import Vue from "vue"
import VueRouter from "vue-router"
// 4.导入单文件组件
import Friend from "@components/Friend"
import Music from "@components/Music"
// 2.通过vue使用VueRouter - 让VueRouter在vue中生效
Vue.use(VueRouter)
// 3.配置路由规则
const routes = [{path: '/friend',component: Friend},{path: '/music',component: Music}
]
// 5.定义路由对象
const router = new VueRouter({routes,// 切换路由模式,默认是hashmode: 'history'
})
// 6.导出路由对象
export default router
在main.js入口文件中配置路由并使之生效
import Vue from 'vue'
import App from './App.vue'
// 导入路由对象
import router from '@router/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 将路由对象配置到vue实例中router
}).$mount('#app')
在组件中放置路由出口 - 显示某个路由组件的内容
<router-view></router-view>
定义两个路由对应的单文件组件。然后就可以在浏览器中通过锚点来访问了。
导航方式
含义:从一个地址跳转到另一个地址/从一个组件切换到另一个组件。
声明式导航
含义:通过点击链接跳转的方式,比如html中的a标签。
声明式导航的原理就是a标签,只是在vue中,对a标签进行组件封装,语法如下:
<router-link to="/index">首页</router-link>
当点击这个链接的时候,就能将地址栏中的锚点换成#/index
如果需要传参,直接将参数跟在地址的?后面
还可以使用v-bind指令:
<router-link :to="{path: '/index'}">首页</router-link>
这种方式要传参的话,可以在对象中添加query属性:
<router-link :to="{path: '/index', query: {id: 10}}">首页</router-link>
参数数据传递到另一个组件中, 不同的传递方式,接收数据的时候方式也是不同的,通过地址后加?和path配合query传的数据,在组件的方法中使用以下方式接收:
this.$route.query
在模板中使用以下方式接收:
{{$route.query}
默认情况下,router-link标签编译成html以后就是a标签,但是vue给router-link标签提供了一个属性,可以让router-link标签编译成其他标签,这个属性叫tag,例:
<router-link :to="{path: '/index', query: {id: 10}}" tag="p">首页</router-link>
点击同样可以切换组件,可是编译后的标签却不是a标签,而是指定的p标签。不用a标签的好处就是能灵活的设置样式。
编程式导航
含义:通过js跳转。
语法如下:
this.$router.push("/login"); // 传参也可以在地址后面加?加参数
this.$router.push({path: "/login"});
this.$router.push({path: '/login', query: {id: 10}});
this.$router.go(n); // 使用方式跟history.go()一样
this.$router.back(); // 返回上一个页面
如果使用编程式导航跳转到当前页的时候,会有一个报错提示,但不影响效果
如果不想让这个报错发生,可以在路由配置文件:router/index.js中配置屏蔽这个错误:
// 该段代码不需要记,理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch((err) => err);
};
命名路由
含义:给路由定义名称,有名称的路由。
当一个路由又了名称之后,我们在跳转的时候就可以使用路由的名称来指定跳转哪个路由。
给路由指定名称使用name键:
const routes = [{name: 'index',path: '/index',component: Index},{name: 'list',path: '/list',component: List},{path: '/detail',name: 'detail',component: Detail}
]
跳转时,通过路由名称跳转:
<router-link :to="{name: 'index'}">首页</router-link>
如果要传递参数,必须使用params键配合name键:
<router-link :to="{name: '/index', params: {id: 10}}">首页</router-link>
编程式导航中也可以使用命名路由:
this.$router.push({name: 'login‘);
this.$router.push({name: 'login', params: {id: 10}});
使用name配合params传值的,在组件的方法中使用以下方式接收:
this.$route.params
在模板中使用以下方式接收:
{{$route.params}}
路由重定向
含义:将原本要跳转的路由,强制跳转到另一个路由中。例如:我们要请求到购物车页面,但是没有登录,就会被强制跳转到登录页面。也就是当我们访问路由/cart,但浏览器会将url替换成/login
实现方式:在路由规则中添加redirect键,值为新的路由。
语法如下:
const routes = [{path: '/cart',redirect: '/login'}
]
上面代码表示,当访问/a路由的时候,会被强制跳转到/login路由
redirect的值可以是一个指定的路由地址,也可以指定路由的名称:
const routes = [{path: '/cart',redirect: {name: 'login'}},{path: '/login',name: 'login',component: Login}
]
路由嵌套
在实际的项目中,很多组件中的内容也都是由多个小模块组成的,每个小模块可以当做是一个组件,每个组件可以对应一个路由。
一个项目由多个组件组成,每个组件都可以通过路由访问到。
每个组件由多个小组件组成,每个小组件也可以通过路由访问到。
这样就形成了路由的嵌套了。路由嵌套通过路由对象的children键设置。语法如下:
const routes = [{path: '/user',component: Userchildren: [{path: 'index',component: UserIndex},{path: 'add',component: UserAdd},{path: 'edit',component: UserEdit}]},{path: '/goods',component: Goods}
]
上面的规则表示,当访问/user路由的时候,显示User组件,当访问/user/add路由的时候,就可以在User组件中显示UserAdd组件,当访问user/index路由的时候就可以在User组件中显示UserIndex组件。。。
使用时需要在组件中添加显示子组件视图的标签。
子路由在定义的时候path路径中不能包含/,否则代表从根路由开始
例:
定义上面的路由规则。创建Goods组件和User组件,User组件内容如下:
<template><div><h3>用户页</h3><router-view></router-view></div>
</template><script>
export default {}
</script><style scoped></style>
分别创建User组件文件、Goods组件文件、UserIndex组件、UserAdd组件、UserEdit组件,然后在浏览器中通过路径访问。
404路由
含义:当访问的路径在所有路由配置中都找不到,在浏览器中会报错,为了给用户有更好的体验感,我们可以指定,当匹配不到路由的时候,显示一个比较友好的提示。
使用方式,就是在路由配置的最下面,添加path键为*的路由,交给指定的组件来处理
vue中的路由是从上到下匹配的,匹配不到路由,是从上到下将所有路由都进行匹配过才得到的,所以404路由会在所有路由的最下面。
例:
const routes = [{ path: "/about", component: About },{ path: "/news", component: News },// 404路由{ path: "*", component: NotFound },
];
动态路由匹配
含义:动态路由指的是在路由规则中,有部分的规则是动态的,会发生变化的,不是固定的值。这种路由就叫做动态路由。
动态路由主要是针对于restful的。
路由定义语法:
// 传递参数id
var router = new VueRouter({// routes是路由规则数组 routes: [{ path: '/user/:id', component: User },// 此处的“:”只是在声明的时候写,在使用的时候不需要写“:”]
})
获取动态路由传递的参数:
// 组件视图中获取id值(html-vue形式组件)
const User = {template: '<div>User ID is {{$route.params.id}}</div>'
}
可选参数的定义:
{ path: "showdetail/:id?", component: ShowDetail },
注
本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog
相关文章:
Vue中的脚手架和路由
私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...
Convolutional Neural network(卷积神经网络)
目录 Why CNN for Image? The whole CNN structure Convolution(卷积) Max Pooling Flatten CNN in Keras What does CNN learn? what does filter do what does neuron do what about output Deep Dream Application Pla…...
【资料分享】高边、低边晶体管开关及电路解析
高边和低边晶体管开关 电路中,晶体管常常被用来当做开关使用。晶体管用作开关时有两种不同的接线方式:高边(high side)和低边(low side)。 高边和低边是由晶体管在电路中的位置决定的。晶体管可以是双极性晶体管(BJT…...
六级备考28天|CET-6|听力第二讲|长对话满分技巧|听写技巧|2022年6月考题|14:30~16:00
目录 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 (6)第六小题 (7)第七小题 (8)第八小题 扩展业务 expand business 4. 重点词汇 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 our guest is Molly Sundas, a university stud…...
计算机图形学 | 实验九:纹理贴图和天空盒
计算机图形学 | 实验九:纹理贴图和天空盒 计算机图形学 | 实验九:纹理贴图和天空盒实验概述顶点数据立方体顶点数据天空盒顶点数组 纹理载入创建纹理纹理读取纹理绑定 使用纹理立方体着色器顶点着色器片元着色器 天空盒着色器顶点着色器片元着色器 立方体…...
Unity A* Pathfinding Project
先下载免费版 https://arongranberg.com/astar/download# 教程首页 https://arongranberg.com/astar/docs/getstarted.html 创建一个plane 当地面 创建一个gameobject 添加组件 PathFinder 长这样 调整每个格子大小的 创建两个layer 一个是阻挡物的 一个是地面的 这里填入阻…...
SpringBoot ( 一 ) 搭建项目环境
1.搭建环境 1.1.创建项目向导 使用idea中的向导创建SpringBoot项目 1.1.1.建立新的项目 位置 : 菜单 > File > New > Project… 1.1.2.选择向导 默认的向导URL 是 https://start.spring.io 建议使用 https://start.aliyun.com 1.1.3.配置项目信息 Group : 组织…...
idea中关联Git
注意:未安装和配置Git软件,请先跳转到 Git宝典_没办法,我就是这么菜的博客-CSDN博客 idea关联git 关联git.exe 选择你的Version Control 下的Git 选择你的Git安装目录bin下的git.exe,点击ok 点击Test,显示版本号…...
Java面试知识点(全)-分布式微服务-zookeeper面试知识点
Java面试知识点(全) 导航: https://nanxiang.blog.csdn.net/article/details/130640392 注:随时更新 ZooKeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现&…...
(IDEA)springCloud项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案
idea导入本地jar包 方法一:点击左上角File–>Project Structure–>Modules。打开Modules界面点击下方号,选择第一项,找到想要导入的本地jar包。此方法可以使项目使用导入的jar包程序不报错,但是在打包项目时,会出现找不到程…...
非线性系统的线性化与泰勒级数
线性系统与非线性系统的区别 我们在读论文的时候经常会遇到这两个系统,线性系统与非线性系统,这两者之间有什么区别呢? 线性指量与量之间按比例、成直线的关系,在空间和时间上代表规则和光滑的运动;非线性则指不按比…...
HOOPS全新文档系统上线!三维模型文件转换更便捷!
HOOPS 2023 U1版本已经正式发布,伴随新版本上线的还有全新的文档系统,新的文档系统亮点包括: 改进了样式和布局,使导航更加简单快捷;修订了导航结构,提高了产品相关信息的清晰度;SDK API参考章…...
第三篇:强化学习发展历史
你好,我是zhenguo(郭震) 这是强化学习第三篇,我们回顾一下它的发展历史:强化学习发展历史 强化学习作为一门研究领域,经历了多年的发展和演进。以下是强化学习的主要发展历史里程碑: 1950年代-1…...
如何学会战略性思维?
上帝在创造一个成功人生时加入了什么配方?一部分努力、一点天赋、必备的人脉、再加入不可或缺的good luck......这都是成功人生的重要因素。 弗雷德佩拉德认为,不管人们在商业领域选择追求什么,要想成功,还需要增加一个名为“战略…...
设备采购信息管理系统
系列文章 任务14 设备采购信息管理系统 文章目录 系列文章一、实践目的与要求1、目的2、要求 二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数4、程序流程图 四、小组成员及分工五、 测试界面展示添加采购信息按编号查找采购信息按设备编号查找…...
Puppeteer入门实践
环境 1、安装nodejs 官网:https://nodejs.org/zh-cn 下载安装好nodejs只后 验证:node -v 出现版本号表示安装成功,否则需要配置环境变量 2、创建node项目并初始化 随便新建一个文件夹 进入文件夹搜索cmd回车 执行npm init -y 安装依赖 …...
生成VLC 及其模块的全面帮助
使用vlc.exe -H命令生成VLC帮助文件vlc-help.txt -h, --help, --no-help 打印 VLC 帮助 (可以和 --advanced 和 --help-verbose 一起使用) (默认禁用) -H, --full-help, --no-full-help VLC 及…...
什么是客户自助服务门户及其搭建方法
随着信息技术的快速发展,越来越多的企业开始转向以客户为中心的服务模式,而客户自助服务门户(Customer Self-Service Portal)则成为了重要的服务方式。它可以让客户在不需要人工干预的情况下,自行解决问题,…...
【5.19】三、白盒测试方法—逻辑覆盖法
目录 3.1 逻辑覆盖法 3.1.1 语句覆盖 3.1.2 判定覆盖 3.1.3 条件覆盖 3.1.4 判定—条件覆盖 3.1.5 条件组合覆盖 3.1.6 实例:三角形逻辑覆盖问题 白盒测试又称为透明盒测试、结构测试,它基于程序内部结构进行测试,而不是测试应用程序…...
Linux安装MySQL后无法通过IP地址访问处理方法
本文主要总结Linux安装Mysql后,其他主机访问不了MySQL数据库的原因和解决方法 环境说明: MySQL 5.7.30CentOS Linux release 7.6.1810 (Core) 创建完Mysql数据库后可以查看mysql 日志获取root 用户登录密码 [rootlocalhost mysql-5.7.30]# cat /var/l…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
