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

Vue中的脚手架和路由

news 2026/5/26 8:19:50

私人博客

许小墨の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

古戏台构件声学特性的时域有限差分方法【附模型】

✨ 长期致力于时域有限差分法、窑洞、戏台、八字墙、共形技术研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）曲面共形网格快速生成算法： …...

编程新知 2026/5/26 3:01:50

2026年，本地精准营销高性价比服务商来袭，你还不了解一下？

在本地商业竞争日益激烈的2026年，实体店面临着诸多挑战，引流难、成本高、复购率低等问题困扰着众多商家。而中粤（广州）信息科技有限公司作为本地精准营销的高性价比服务商，正以其独特的优势和卓越的服务，为…...

编程新知 2026/5/26 1:53:13

Vue3 图片标框功能实现方案

基于 Vue3 组合式 API 的图片标框（画框、标注、选框）完整实现，核心逻辑封装在 GetBoxes 组件里，复制就能用一、功能说明 ✅ 在图片上鼠标拖拽画矩形框 ✅ 实时显示框坐标（x, y, width, height） ✅ 支持多…...

编程新知 2026/5/26 1:51:13

Veo 2胶片质感生成器失效？——深度解析Color Science v2.3内核中被屏蔽的Cinematic Grain Injection层

更多请点击： https://kaifayun.com 第一章：Veo 2胶片质感生成器失效现象全景透视近期大量用户反馈，Veo 2 胶片质感生成器在调用 generate_film_effect() 接口后返回空纹理、纯灰帧或 HTTP 503 Service Unavailable 错误，且该问题…...

编程新知 2026/5/26 1:06:54

钱钟书《围城》第1-5章阅读笔记：一场关于人生困境的提前预演

前言钱钟书先生的《围城》被誉为"新儒林外史"，是中国现代文学史上风格独特的讽刺经典。这部创作于20世纪40年代的长篇小说，以抗战初期为背景，通过主人公方鸿渐的人生轨迹，深刻揭示了知识分子群体的精神困境与人性弱点。…...

编程新知 2026/5/26 0:20:12

Unity事件系统实战：用事件驱动重构你的金币拾取逻辑（告别硬编码）

Unity事件系统实战：用事件驱动重构你的金币拾取逻辑（告别硬编码）在游戏开发中，我们经常会遇到这样的场景：玩家拾取金币后，需要更新UI、播放音效、解锁成就、保存数据……如果把这些逻辑全部写在金币拾取的代…...

编程新知 2026/5/25 22:38:33

基于TESS光变曲线与深度学习的O型星物理参数预测研究

1. 项目概述与核心挑战在恒星天体物理研究中，大质量O型星扮演着至关重要的角色。它们不仅是宇宙中光度最高的天体之一，其强烈的辐射、恒星风和最终的超新星爆发，更是驱动星系化学演化和能量注入星际介质的关键引擎。然而，深入理解…...

编程新知 2026/5/25 19:57:31

Go开发者必备：circuitbreaker API全解析与最佳实践指南 [特殊字符]

Go开发者必备：circuitbreaker API全解析与最佳实践指南 🚀 【免费下载链接】circuitbreaker Circuit Breakers in Go 项目地址: https://gitcode.com/gh_mirrors/circ/circuitbreaker 作为一名Go开发者，你是否经常遇到远程服务调用失败…...

编程新知 2026/5/25 18:08:05

从数据到模型：手把手教你预处理MPIIFaceGaze和EyeDiap数据集（Python实战）

从数据到模型：手把手教你预处理MPIIFaceGaze和EyeDiap数据集（Python实战）当你第一次打开MPIIFaceGaze或EyeDiap数据集的压缩包时，那种面对杂乱文件夹和神秘.mat文件的迷茫感，我太熟悉了。作为计算机视觉工程师&#xf…...

编程新知 2026/5/25 17:32:25

模式分层预测驱动推断：处理复杂缺失数据的统计新框架

1. 项目概述：当数据“缺胳膊少腿”时，如何做出靠谱的推断？在数据科学和统计建模的日常工作中，我们最怕遇到什么？不是复杂的算法，也不是海量的数据，而是数据本身“缺胳膊少腿”——也就是缺失值。…...

编程新知 2026/5/25 16:19:43