当前位置：首页 > news >正文

Vue中的脚手架和路由

news 2025/6/25 0:25:03

私人博客

许小墨の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博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！ 系列文章目录前端系列文章——传送门后端系列文章——传送…...

编程日记 2023/5/23 6:45:39

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…...

编程日记 2023/5/23 6:40:38

【资料分享】高边、低边晶体管开关及电路解析

高边和低边晶体管开关电路中，晶体管常常被用来当做开关使用。晶体管用作开关时有两种不同的接线方式：高边（high side）和低边(low side)。高边和低边是由晶体管在电路中的位置决定的。晶体管可以是双极性晶体管（BJT…...

编程日记 2023/5/30 14:12:42

六级备考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…...

编程日记 2023/5/23 6:30:36

计算机图形学 | 实验九：纹理贴图和天空盒

计算机图形学 | 实验九：纹理贴图和天空盒计算机图形学 | 实验九：纹理贴图和天空盒实验概述顶点数据立方体顶点数据天空盒顶点数组纹理载入创建纹理纹理读取纹理绑定使用纹理立方体着色器顶点着色器片元着色器天空盒着色器顶点着色器片元着色器立方体…...

编程日记 2023/5/30 14:14:13

Unity A* Pathfinding Project

先下载免费版 https://arongranberg.com/astar/download# 教程首页 https://arongranberg.com/astar/docs/getstarted.html 创建一个plane 当地面创建一个gameobject 添加组件 PathFinder 长这样调整每个格子大小的创建两个layer 一个是阻挡物的一个是地面的这里填入阻…...

编程日记 2023/5/31 23:12:34

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 : 组织…...

编程日记 2023/5/23 6:15:32

idea中关联Git

注意：未安装和配置Git软件，请先跳转到 Git宝典_没办法，我就是这么菜的博客-CSDN博客 idea关联git 关联git.exe 选择你的Version Control 下的Git 选择你的Git安装目录bin下的git.exe，点击ok 点击Test，显示版本号…...

编程日记 2023/5/23 6:10:31

Java面试知识点(全)-分布式微服务-zookeeper面试知识点

Java面试知识点(全) 导航： https://nanxiang.blog.csdn.net/article/details/130640392 注：随时更新 ZooKeeper是什么？ ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Google的Chubby一个开源的实现&…...

编程日记 2023/5/23 6:05:30

（IDEA）springCloud项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

idea导入本地jar包方法一:点击左上角File–>Project Structure–>Modules。打开Modules界面点击下方号，选择第一项，找到想要导入的本地jar包。此方法可以使项目使用导入的jar包程序不报错，但是在打包项目时，会出现找不到程…...

编程日记 2023/5/23 6:00:28

非线性系统的线性化与泰勒级数

线性系统与非线性系统的区别我们在读论文的时候经常会遇到这两个系统，线性系统与非线性系统，这两者之间有什么区别呢？ 线性指量与量之间按比例、成直线的关系，在空间和时间上代表规则和光滑的运动；非线性则指不按比…...

编程日记 2023/5/23 5:55:27

HOOPS全新文档系统上线！三维模型文件转换更便捷！

HOOPS 2023 U1版本已经正式发布，伴随新版本上线的还有全新的文档系统，新的文档系统亮点包括： 改进了样式和布局，使导航更加简单快捷；修订了导航结构，提高了产品相关信息的清晰度；SDK API参考章…...

编程日记 2023/5/23 5:50:26

第三篇：强化学习发展历史

你好，我是zhenguo（郭震） 这是强化学习第三篇，我们回顾一下它的发展历史：强化学习发展历史强化学习作为一门研究领域，经历了多年的发展和演进。以下是强化学习的主要发展历史里程碑： 1950年代-1…...

编程日记 2023/5/23 5:45:25

如何学会战略性思维？

上帝在创造一个成功人生时加入了什么配方？一部分努力、一点天赋、必备的人脉、再加入不可或缺的good luck......这都是成功人生的重要因素。弗雷德佩拉德认为，不管人们在商业领域选择追求什么，要想成功，还需要增加一个名为“战略…...

编程日记 2023/5/23 5:40:24

设备采购信息管理系统

系列文章任务14 设备采购信息管理系统文章目录系列文章一、实践目的与要求1、目的2、要求二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数4、程序流程图四、小组成员及分工五、测试界面展示添加采购信息按编号查找采购信息按设备编号查找…...

编程日记 2023/5/23 5:35:23

Puppeteer入门实践

环境 1、安装nodejs 官网：https://nodejs.org/zh-cn 下载安装好nodejs只后验证：node -v 出现版本号表示安装成功，否则需要配置环境变量 2、创建node项目并初始化随便新建一个文件夹进入文件夹搜索cmd回车执行npm init -y 安装依赖 …...

编程日记 2023/5/29 15:45:17

生成VLC 及其模块的全面帮助

使用vlc.exe -H命令生成VLC帮助文件vlc-help.txt -h, --help, --no-help 打印 VLC 帮助 (可以和 --advanced 和 --help-verbose 一起使用) (默认禁用) -H, --full-help, --no-full-help VLC 及…...

编程日记 2023/5/31 6:58:10

什么是客户自助服务门户及其搭建方法

随着信息技术的快速发展，越来越多的企业开始转向以客户为中心的服务模式，而客户自助服务门户（Customer Self-Service Portal）则成为了重要的服务方式。它可以让客户在不需要人工干预的情况下，自行解决问题，…...

编程日记 2023/5/23 5:20:20

【5.19】三、白盒测试方法—逻辑覆盖法

目录 3.1 逻辑覆盖法 3.1.1 语句覆盖 3.1.2 判定覆盖 3.1.3 条件覆盖 3.1.4 判定—条件覆盖 3.1.5 条件组合覆盖 3.1.6 实例：三角形逻辑覆盖问题白盒测试又称为透明盒测试、结构测试，它基于程序内部结构进行测试，而不是测试应用程序…...

编程日记 2023/5/23 5:15:19

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…...

编程日记 2023/5/23 5:10:18

VB.net复制Ntag213卡写入UID

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/6/24 2:56:04

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/6/25 0:03:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/6/24 0:57:55

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略背景Solution --- 分表背景使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...

编程新知 2025/6/24 3:19:01

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/6/15 15:47:35

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/6/16 13:40:18

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...

编程新知 2025/6/22 12:36:42

深度学习习题2

1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...

编程新知 2025/6/24 10:14:04

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/6/15 14:40:42

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/6/24 3:11:44