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

从上帝视角俯瞰vue2路由(简单易懂)

news 文章来源：https://blog.csdn.net/m0_65491952/article/details/132491138 2025/2/6 22:01:07

文章目录

路由原理（hash）
路由安装和使用（vue2）
路由跳转
路由的传参和取值
嵌套路由
路由守卫
完整代码

路由原理（hash）

单页应用的路由模式有两种

哈希模式（利用hashchange 事件监听 url的hash 的改变）

哈希模式的原理
- 哈希模式下，哈希部分的改变不会触发浏览器向服务器发送新的请求，所有的路由都会发送到同一个HTML文件。这意味着，即使在前端进行页面导航，服务器也不需要额外的配置，因为所有的路由都会被前端路由器处理。

Video_2023-08-25_110736

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">头部<router-link to="ger">个人</router-link><router-link to="login">登录</router-link><button @click="logins">登录</button><button @click="gers">个人</button><br><button @click="gersid">apl 带参数的个人</button><router-link :to="{path:'/login',query:{id:queryid}}">带查询参数的登录link</router-link><br><router-link  :to="{name:'login',params:{id:queryid}}">路由参登录link</router-link><button @click="gersidhs">apl 带参数的个人</button><hr><!-- 下面是路由出口 --><router-view :key="$route.fullPath"></router-view>尾部</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script><script>//安装路由,前提要导入路由jsVue.use(VueRouter)//创建一个登录子组件var login={template:`<div>登录页面    </div>`,mounted(){console.log(this.$route.query.id);console.log(this.$route.params.id);}}//创建一个登录子组件var ger={template:`<div>个人页面    </div>`,mounted(){console.log(this.$route.query.id);console.log(this.$route.params.id);}}//创建路由配置实例,主要实现 路径和子组件时间的映射var myrouter =new VueRouter({routes:[{path:'/login',name:'login',component:login},{path:'/ger',name:'ger',component:ger}]})var app=new Vue({el:"#app",router:myrouter,data(){return{queryid:1}},methods:{logins(){this.$router.push({path:'/login'});},gers(){this.$router.replace({path:'/ger'})},gersid(){this.$router.push({path:'/ger',query:{id:this.queryid}})},gersidhs(){this.$router.push({name:'ger',params:{id:"6"}});}}})</script>
</html>

history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）
- hash模式的原理：
  - 核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>单页面跳转的原理</title></head><body><a href="#/login">登录</a>|<a href="#/register">注册</a><div id="app"></div><script type="text/javascript">var appDom = document.getElementById("app");window.addEventListener("hashchange",function(){console.log(location.hash);switch(location.hash){case '#/login':appDom.innerHTML = "登录";break;case '#/register':appDom.innerHTML="注册";break;}})</script></body>
</html>

路由安装和使用（vue2）

导入路由插件

<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

安装路由插件到Vue中

Vue.use(VueRouter);

创建VueRouter对象

var Login = Vue.extends({template:`<div>我是登录页面</div>`
});
// 创建VueRouter对象,并配置路由
var myRouter = new VueRouter({// 配置路由routes:[// 指定路由链接、路由名称、路由页面（组件）{path:'/login',name:'login',component:Login}]
});

使用路由

var myvue = new Vue({el:'#app',// 引入到vue 实例中，并在模板中使用<router-view>router:myRouter,template:`<div>头部<router-view></router-view>尾部</div>`
})

路由跳转

路由的跳转有两种方式：

使用标签

<router-link to='/login'></router-link>

编程式路由，使用js

this.$router.push({path:'/login'});
this.$router.replace({path:'/login'});

说明：

this.$router.push(); 会向history中添加记录
this.$router.replace();不会向history中添加记录。
this.$router.go(-1)常用来做返回上一个地址。

路由中的对象：

this.$route 路由信息对象，只读。
this.$router 路由操作对象，只写。

路由的传参和取值

查询参

配置。查询参可以和path属性匹配，也可以和name属性匹配。

<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>

或者

<router-link :to="{name:'login',query:{id:queryid}}"></router-link>

或者

this.$router.push({path:'/login',query:{id:queryid}});

取参

路由参

配置路由规则

var router = new VueRouter({
routers:[// 需要在配置路由规则时，使用冒号指定参数{name:'login',path:'/login/:id',component:LoginVue}
]
});

配置。意：在这里path和params两个参数不能同时使用

<router-link :to="{name:'login',params:{id:paramId}}"></router-link>

或者

this.$router.push({name:'login',params:{id:this.paramId}});

取参

this.$route.params.id;

注意：相同路由，但参数不同。造成页面不刷新的问题。

<router-view :key="$route.fullPath"></router-view>

嵌套路由

路由间有层级关系。他们在模板中也有嵌套关系。
可以一次性配置多个路由。

var Nav = {template:`<div><router-link :to="{name:'nav.index'}">首页</router-link><router-link :to="{name:'nav.personal'}">个人中心</router-link><router-link :to="{name:'nav.message'}">消息</router-link><router-view></router-view></div>`};var Index = {template:`<div>首页</div>`}var Personal = {template:`<div>个人中心</div>`}var Message = {template:`<div>消息</div>`}

var router = new VueRouter({routes:[{path:'/nav',name:'nav',component:Nav,children:[{path:'',redirect:'/nav/index'},{path:'index',name:'nav.index',component:Index},{path:'personal',name:'nav.personal',component:Personal},{path:'message',name:'nav.message',component:Message}]},{path:'',redirect:'/nav'}]});

var app01 = new Vue({el:'#app',template:`<div><router-view></router-view></div>`,router
});

路由守卫

可以做验证判断
使用路由的钩子函数beforeEach实现

let app = new Vue({el: '#app01',router:myRouter,mounted() {this.$router.beforeEach((to,from,next)=>{console.log(to);if(to.path=='/nav/index'){// 跳转到目标路由next();}else{setTimeout(function(){next();},2000);}});}});

完整代码

Video_2023-08-28_105346

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><router-view :key="$route.fullPath"></router-view></div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>//安装路由,前提要导入路由jsVue.use(VueRouter)//导航子组件,以及路由var nav = {template:`<div><router-link :to="{name:'nav.index'}">首页</router-link><router-link :to="{name:'nav.personal'}">个人中心</router-link><router-link :to="{name:'nav.message'}">消息</router-link><router-view></router-view></div>`};var Index = {template:`<div>首页</div>`}var Personal = {template:`<div>个人中心</div>`}var Message = {template:`<div>消息</div>`}var router=new VueRouter({routes:[{path:'/nav',name:'nav', component:nav,children:[{path:'',redirect:'/nav/index'},{path:'index',name:'nav.index',component:Index},{path:'personal',name:'nav.personal',component:Personal},{path:'message',name:'nav.message',component:Message}]},{path:'',redirect:'/nav'}]});var app=new Vue({el:"#app",router,mounted() {this.$router.beforeEach((to,from,next)=>{console.log(to);if(to.path=='/nav/index'){//判断跳转的是否是首页,否延时2秒后跳转// 跳转到目标路由next();}else{setTimeout(function(){next();},2000);}});}});
</script>
</html>

从上帝视角俯瞰vue2路由(简单易懂)

文章目录路由原理（hash）路由安装和使用（vue2）路由跳转路由的传参和取值嵌套路由路由守卫完整代码路由原理（hash） 单页应用的路由模式有两种哈希模式（利用hashchange 事件监听 url的hash 的…...

编程日记 2023/8/28 11:52:47

STL-空间配置器的了解

前言空间配置器，顾名思义就是为了各个容器高效的管理空间（空间的申请与回收）的，在默默的工作的。虽然在常规上使用STL时，可能用不上它，但是站在学习研究的角度，学习它的实现原理对我们有很大的…...

编程日记 2023/8/28 11:51:45

哔哩哔哩 B站 bilibili 视频视频音效调节清澈人声

视频音效调节方式：直接视频播放内容界面内鼠标右键点击视频音效调节注意：需要使用的是谷歌浏览器，我的火狐浏览器试了不行，都没选项，火狐的出来的界面是这样的： 目录具体操作如下： 1、谷歌…...

编程日记 2023/8/28 11:50:43

下一代存储解决方案：湖仓一体

文章首发地址湖仓一体是将数据湖和数据仓库相结合的一种数据架构，它可以同时满足大数据存储和传统数据仓库的需求。具体来说，湖仓一体可以实现以下几个方面的功能： 数据集成： 湖仓一体可以集成多个数据源，包括结构…...

编程日记 2023/8/28 11:49:41

IntelliJ IDEA 2023.2.1 修复版本日志

我们刚刚发布了 v2023.2 的第一个错误修复更新。您可以从 IDE 内部、使用工具箱应用程序或通过快照（如果您使用的是 Ubuntu）更新到此版本。您也可以直接从我们的网站下载。以下是最新版本中包含的最值得注意的改进和修复的列表： 我们已经解…...

编程日记 2023/8/28 11:48:39

算法通关村十三关 | 数组字符串加法专题

1. 数组实现整数加法题目：LeetCode66，66. 加一 - 力扣（LeetCode） 思路我们只需要从头到尾依次运算，用常量标记是否进位，需要考虑的特殊情况是digits [9,9,9]的时候进位，我们组要创建长度加1…...

编程日记 2023/8/28 11:47:38

k8s--基本概念理解

必填字段在要创建的 Kubernetes 对象的文件中.yaml，您需要设置以下字段的值： apiVersion- 您使用哪个版本的 Kubernetes API 创建此对象 kind- 你想创建什么样的对象 metadata- 有助于唯一标识对象的数据，包括name字符串、UID和可选namesp…...

编程日记 2023/8/28 11:46:37

流媒体开发千问【持续更新】

H.264中IDR帧和I帧区别 H.264/AVC编码标准中，IDR帧和I帧都是关键帧，即它们都不依赖于其他帧进行解码。但是，它们之间存在明确的区别： 定义与功能： I帧（Intra-frame）：I帧是一个内部编…...

编程日记 2023/8/28 11:45:35

全球各国官方语言大盘点，英语不得不学哇。。。

因国家和地区范围界定不同，官方语言只是个相对概念。具体而言是一个国家通用的正式语言或认定的正式语言。它是为适应管理国家事务的需要，在国家机关、正式文件、法律裁决及国际交往等官方场合中规定一种或几种语言为有效语言的现象。官方语言也是一个国…...

编程日记 2023/8/28 11:44:34

【mq】如何保证消息可靠性

文章目录 mq由哪几部分组成rocketmqkafka 为什么需要这几部分nameserver/zookeeper可靠性 broker可靠性生产者消费者 mq由哪几部分组成 rocketmq kafka 这里先不讨论Kafka Raft模式比较一下，kafka的结构和rocketmq的机构基本上一样，都需要一个注册…...

编程日记 2023/8/28 11:43:32

疲劳检测-闭眼检测（详细代码教程）

简介瞌睡经常发生在汽车行驶的过程中，该行为害人害己，如果有一套能识别瞌睡的系统，那么无疑该系统意义重大！ 实现步骤思路：疲劳驾驶的司机大部分都有打瞌睡的情形，所以我们根据驾驶员眼睛闭合的频率和…...

编程日记 2023/8/28 11:42:31

1、HDFS NameNode /usr/local/fqlhadoop/hadoop/sbin/hadoop-daemon.sh start namenode /usr/local/fqlhadoop/hadoop/sbin/hadoop-daemon.sh stop namenode bin/hdfs haadmin -DFSHAAdmin -getServiceState n1 2、HDFS DataNode /usr/local/fqlhadoop/hadoop/sbin/hadoop-…...

编程日记 2023/8/28 11:41:30

解锁安全高效办公——私有化部署的WorkPlus即时通讯软件

在当今信息时代，高效的沟通与协作对于企业的成功至关重要。然而，随着信息技术的发展，保护敏感信息和数据安全也变得越来越重要。为了满足企业对于安全沟通和高效办公的需求，我们隆重推出私有化部署的WorkPlus即时通讯软件&#xf…...

编程日记 2023/8/28 11:40:27

IDEA使用git

文章目录给所有文件配置git初始化本地仓库创建.gitignore文件添加远程仓库分支操作给所有文件配置git 初始化本地仓库创建.gitignore文件添加远程仓库分支操作新建分支 newbranch 切换分支 checkout 推送分支 push 合并分支 merge...

编程日记 2023/8/28 11:39:26

【跟小嘉学 Rust 编程】十八、模式匹配(Patterns and Matching)

系列文章目录【跟小嘉学 Rust 编程】一、Rust 编程基础【跟小嘉学 Rust 编程】二、Rust 包管理工具使用【跟小嘉学 Rust 编程】三、Rust 的基本程序概念【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据【跟小嘉学…...

编程日记 2023/8/28 11:38:25

keepalived+lvs+nginx高并发集群

keepalivedlvsnginx高并发集群简介： keepalivedlvsnginx高并发集群，是通过LVS将请求流量均匀分发给nginx集群，而当单机nginx出现状态异常或宕机时，keepalived会主动切换并将不健康nginx下线，维持集群稳定高可用 1.L…...

编程日记 2023/8/28 11:37:24

剑指Offer65.不用加减乘除做加法 C++

1、题目描述写一个函数，求两个整数之和，要求在函数体内不得使用 “”、“-”、“*”、“/” 四则运算符号。示例: 输入: a 1, b 1 输出: 2 2、VS2019上运行使用位运算的方法 #include <iostream>class Solution { public:/*** 计算两个整…...

编程日记 2023/8/28 11:36:21

【linux命令讲解大全】004.探索Linux命令行中的chmod和chown工具

文章目录 chmod概要主要用途参数选项返回值例子 chown补充说明语法选项参数实例从零学 python chmod 用来变更文件或目录的权限概要 chmod [OPTION]... MODE[,MODE]... FILE... chmod [OPTION]... OCTAL-MODE FILE... chmod [OPTION]... --referenceRFILE FILE...主要用途…...

编程日记 2023/8/28 11:35:20

nginx会话保持

ip_hash:通过IP保持会话作用： nginx通过后端服务器地址将请求定向的转发到服务器上。将客户端的IP地址通过哈希算法加密成一个数值如果后端有多个服务器，第一次请求到服务器A， 并在务器登录成功，那么再登录B服务器就要重新…...

编程日记 2023/8/28 11:33:17

SpringBoot使用Druid连接池 + 配置监控页面(自定义版 + starter版)

目录 1. Druid连接池的功能2. 自定义版2.1 pom.xml添加依赖2.2 MyDataSourceConfig实现2.3 application.properties配置编写Controller进行测试2.4 druid监控页面查看 3. starter版3.1 pom.xml添加依赖3.2 自动配置分析3.3 使用application.properties对druid进行配置3.4 druid…...

编程日记 2023/8/28 11:32:16

【业务功能篇77】微服务-OSS对象存储-上传下载图片

3. 图片管理文件存储的几种方式单体架构可以直接把图片存储在服务器中但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了，这时我们需要搭建独立的文件存储服务器。 3.1 开通阿里云服务针对本系统中的相关的文件，图片，文本等…...

编程日记 2023/8/28 11:31:15

【CSS 常用加载动画效果】

常用加载效果呼吸灯效果波浪光效果转圈加载呼吸灯效果 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><div id"ti"></div></body><style>b…...

编程日记 2023/8/28 11:30:14

python 模块requests 发送 HTTP 请求

一、简介 requests 模块是 python 基于 urllib，采用 Apache2 Licensed 开源协议的 HTTP 库。它比 urllib 更加方便，可以节约我们大量的工作二、安装 pip install requestsimport requests三、方法 requsts.requst(method, url,headers,cookies,prox…...

编程日记 2023/8/28 11:29:13

关于 Camera 预览和录像画质不一样的问题分析

1、问题背景基于之前安卓平台的一个项目，客户有反馈过一个 Camera app 预览的效果，和录像效果不一致的问题。这里的预览是指打开 Camera app 后直接出图的效果；录像的效果则是指打开 Camera app 开启录像功能，录制一段视频&…...

编程日记 2023/8/28 11:28:10

【音视频】视频的播放和暂停，当播放到末尾时触发 ended 事件，循环播放,播放速度

video 也可以播放 MP3 音频，当不想让视频显示出来的话，可以给 video 设置宽和高 1rpx ，不可以隐藏 <template><view class"form2box"><u-navbar leftClick"leftClick"><view slot"left&q…...

编程日记 2023/8/28 11:27:08

Python数据分析高薪实战第一天 python基础与项目环境搭建

开篇词数据赋能未来，Python 势不可挡互联网公司从红利下的爆发期，进入新的精细化发展阶段，亟须深入分析与挖掘业务与数据价值，从而找到新的增长点突破现有增长瓶颈。各行各业的数据分析需求井喷，数据分析人才成为争…...

编程日记 2023/8/28 11:26:07

pandas数据分析——groupby得到分组后的数据

groupbyagg分组聚合对数据字段进行合并拼接 Pandas怎样实现groupby聚合后字符串列的合并（四十） groupby得到分组后的数据 pandas—groupby如何得到分组里的数据 date_range补齐缺失日期在处理时间序列的数据中，有时候会遇到有些日期的数…...

编程日记 2023/8/28 11:25:06

Android studio 软件git使用

在 test 分支添加的方法 , 现在切换到 master分支总共 2 个分支 , 当前的分支是 test 出现了先试一下 force checkout , 尝试之后发现 , 你更改没有带过来 , 以为哪个类在master分支没有 , 所以这边也没有 , 切回分支 test 发现之前的跟改没有 , 这样即可以找回继续切换…...

编程日记 2023/8/28 11:24:02

通过C实现sqlite3操作，导入电子词典

#include <stdio.h> #include <string.h> #include <stdlib.h> #include <sqlite3.h> int main(int argc, const char *argv[]) {//创建并打开一个数据库sqlite3 *db NULL;if(sqlite3_open("./dict.db",&db) ! SQLITE_OK){printf("…...

编程日记 2023/8/28 11:23:02

K8S集群中使用JDOS KMS服务对敏感数据安全加密 | 京东云技术团队

基本概念 KMS，Key Management Service，即密钥管理服务，在K8S集群中，以驱动和插件的形式启用对Secret，Configmap进行加密。以保护敏感数据， 驱动和插件需要使用者按照需求进行定制和实现自己的KMS插件&…...

编程日记 2023/8/28 11:22:01

交互网站设计/深圳百度推广排名优化

概述对于应用开发者来说，数据连接泄漏无疑是一个可怕的梦魇。如果存在数据连接泄漏问题，应用程序将因数据连接资源的耗尽而崩溃，甚至还可能引起数据库的崩溃。数据连接泄漏像黑洞一样让开发者避之唯恐不及。 Spring DAO 对所有支持的数据访问…...

编程日记 2025/2/6 20:15:29

做网站用买服务器码/目前最靠谱的推广平台

📢📢📢📢📢📢 哈喽！大家好，我是【梦想橡皮擦】，10 年产研经验，致力于 Python 相关技术栈传播 💗 🌻 本文如果觉得不错，动…...

编程日记 2025/2/6 16:36:02

seo诊断工具/谷歌seo查询

rabbitmq相关知识 // 静态页面的引入，静态资源上传nginx等192.168.56.10 gulimall.com 192.168.56.10 search.gulimall.com 192.168.56.10 item.gulimall.com 192.168.56.10 auth.gulimall.com 192.168.56.10 cart.gulimall.com 192.168.56.10 order.gulimall.com-…...

编程日记 2025/2/6 8:35:10

做网站1g网页空间够吗/如何制作网页设计

2019独角兽企业重金招聘Python工程师标准>>> 在Centos7 系统中使用supermin制作CentOS6 的Docker镜像 jin771998569关注0人评论1499人阅读2018-01-19 17:08:40 使用supermin制作CentOS的Docker镜像需求 supermin 在Centos7 里面安装默认只能够构建Centos7 版本的基…...

编程日记 2025/2/6 7:40:36

徐州优化网站建设/搜索引擎排名规则

今天以developer的身份参加了淘宝top启动仪式深圳站的发布会.. 原定4个多小时的会程缩减到不到2个小时, 这跟某某领导贯彻某某思想的动辄半天一天激情party南辕北辙...会程缩减好处多多,一方面方便了与会者,省时省力..再则,减小了场地费开支(不知macro polo场地如何计费~~)...双…...

编程日记 2025/2/6 2:16:05

济南网站建设jnwuyi/百度竞价推广是什么工作

本文将集中讨论如何使用CUDA代码创建一个非托管DLL，并在C#程序中使用它，列举的例子将展示在数组上做计算的for()循环的托管、非托管和新的.NET 4并行版本之间的一些差异。我将简要地介绍如何配置CUDA环境和运行示例程序，CUDA本身已经超出了本…...

编程日记 2025/2/6 0:45:29