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

Vue2（路由）

news 文章来源：https://blog.csdn.net/H20031011/article/details/132452237 2024/11/16 18:46:51

一，路由原理（hash）

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

1、哈希模式（利用hashchange 事件监听 url的hash 的改变）
2、history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）

hash模式的原理：

核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变
后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

演示1

二，路由安装和使用（vue2）

导入路由插件

<script src="../js/vue-router.js"></script>

安装路由插件到Vue中

Vue.use(VueRouter);

创建VueRouter对象

    // 路由的安装 前提是要导入路由jsVue.use(VueRouter)// 创建一个登录子组件var login = {template:`<div>登录页面    </div>`,}// 创建路由配置实例，主要实现，路劲和子组件之间的映射var myrouter = new VueRouter({routes:[{path:'/login/id',name:'login',component:login},]})

使用路由

<body><div id="app">头部<!-- 下面是路由出口 --><router-view></router-view>尾部</div>
</body>
<script src="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/js/vue-router.js"></script>
<script>// 路由的安装 前提是要导入路由jsVue.use(VueRouter)// 创建一个登录子组件var login = {template:`<div>个人页面    </div>`,}// 创建路由配置实例，主要实现，路劲和子组件之间的映射var myrouter = new VueRouter({routes:[{path:'/login',name:'login',component:login},]})var app = new Vue({el:'#app',data(){return{}},router:myrouter,})</script>

示例2

三，路由跳转

路由的跳转有两种方式：

使用标签

<router-link to="/login">登录</router-link>

编程式路由，使用js

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

说明：

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

路由中的对象：

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

<!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="/login">登录</router-link><router-link to="/person">个人</router-link><button @click="toxiaohao">api 王导</button><!-- 下面是路由出口 --><router-view></router-view>尾部</div>
</body>
<script src="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/js/vue-router.js"></script>
<script>// 路由的安装 前提是要导入路由jsVue.use(VueRouter)// 创建一个登录子组件var login = {template:`<div>登录页面     </div>`,}// 创建一个登录子组件var person = {template:`<div> 个人页面 </div>`,}// 创建一个个人页面子组件var xiaohao = {template:`<div>王导页面    </div>`,}// 创建路由配置实例，主要实现，路劲和子组件之间的映射var myrouter = new VueRouter({routes:[{path:'/login',name:'login',component:login},{path:'/person',name:'person',component:person},{path:'/xiaohao',name:'xiaohao',component:xiaohao}]})var app = new Vue({el:'#app',data(){return{}},router:myrouter,methods:{toxiaohao(){this.$router.replace({path:'/xiaohao'})},}})</script>
</html>

示例3

四，路由的传参和取值

查询参

配置。查询参可以和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}});

取参

// 此代码可以写到组件的钩子函数中
this.$route.query.id

<!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="{path:'login',query:{id:loginId}}">带参数登录</router-link><router-link :to="{name:'person',query:{id:personId}}">带参数个人</router-link><button @click="clxiaodao">带参数王导</button><!-- 下面是路由出口 --><router-view></router-view>尾部</div>
</body>
<script src="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/js/vue-router.js"></script>
<script>// 路由的安装 前提是要导入路由jsVue.use(VueRouter)// 创建一个登录子组件var login = {template:`<div>登录页面     </div>`, mounted(){console.log(this.$route.query.id);},}// 创建一个登录子组件var person = {template:`<div> 个人页面 </div>`,mounted(){console.log(this.$route.query.id);},  }// 创建一个个人页面子组件var xiaodao = {template:`<div>王导页面    </div>`,mounted(){console.log(this.$route.query.id);},}// 创建路由配置实例，主要实现，路劲和子组件之间的映射var myrouter = new VueRouter({routes:[{path:'/login',name:'login',component:login},{path:'/person',name:'person',component:person},{path:'/xiaodao',name:'xiaodao',component:xiaodao}]})var app = new Vue({el:'#app',data(){return{loginId:1,personId:2,xiaodaoId:3}},router:myrouter,methods:{clxiaodao(){this.$router.push({path:'/xiaodao',query:{id:this.xiaodaoId}})},}})</script>
</html>

示例4

路由参

配置路由规则

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>

<!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="{name:'login',params:{id:loginId}}">路由登录</router-link><router-link :to="{name:'person',params:{id:personId}}">路由个人</router-link><button @click="apixiaodao">api路由 王导</button><!-- 下面是路由出口 --><router-view></router-view>尾部</div>
</body>
<script src="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/js/vue-router.js"></script>
<script>// 路由的安装 前提是要导入路由jsVue.use(VueRouter)// 创建一个登录子组件var login = {template:`<div>登录页面     </div>`, mounted(){console.log(this.$route.params.id);}}// 创建一个登录子组件var person = {template:`<div> 个人页面 </div>`,mounted(){console.log(this.$route.params.id);}}// 创建一个个人页面子组件var xiaodao = {template:`<div>王导页面    </div>`,mounted(){console.log(this.$route.params.id);}}// 创建路由配置实例，主要实现，路劲和子组件之间的映射var myrouter = new VueRouter({routes:[{path:'/login/id',name:'login',component:login},{path:'/person/id',name:'person',component:person},{path:'/xiaodao/id',name:'xiaodao',component:xiaodao}]})var app = new Vue({el:'#app',data(){return{loginId:1,personId:2,xiaodaoId:3}},router:myrouter,methods:{apixiaodao(){this.$router.push({name:'xiaodao',params:{id:this.xiaodaoId}})}}})</script>
</html>

示例5

五，嵌套路由

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

<!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="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/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.person'}">个人中心</router-link>    <router-link :to="{name:'nav.message'}">消息</router-link> <router-view></router-view>    </div>`}//  首页子组件，二级路由var index = {template:`<div>首页    </div>`}//  个人中心子组件，二级路由var person = {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:'person',name:'nav.person',component:person},{path:'message',name:'nav.message',component:message},]},{path:'',redirect:'/nav'}]})var app = new Vue({el:'#app',router,})</script>
</html>

示例六

六，路由守卫

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

mounted(){this.$router.beforeEach((to,from,next)=>{console.log(to);if(to.path=='/index'){next();}else{setTimeout(()=>{next()},2000)}})}

完整代码

<!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="../Vue2/js/vue2.7.js"></script>
<script src="../Vue2/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.person'}">个人中心</router-link>    <router-link :to="{name:'nav.message'}">消息</router-link> <router-view></router-view>    </div>`}//  首页子组件，二级路由var index = {template:`<div>首页    </div>`}//  个人中心子组件，二级路由var person = {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:'person',name:'nav.person',component:person},{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=='/index'){next();}else{setTimeout(()=>{next()},2000)}})}})</script>
</html>

最后

送大家一句话：半山腰总是挤的你要去山顶看看！！！

Vue2（路由）

目录一，路由原理（hash）二，路由安装和使用（vue2）三，路由跳转四，路由的传参和取值五，嵌套路由六，路由守卫最后一，路由原理（hash&#…...

编程日记 2023/8/24 3:44:57

中介者模式-协调多个对象之间的交互

在深圳租房市场，有着许多的“二房东”，房主委托他们将房子租出去，而租客想要租房的话，也是和“二房东”沟通，租房期间有任何问题，找二房东解决。对于房主来说，委托给“二房东”可太省事了&#…...

编程日记 2023/8/24 3:43:56

Python框架【自定义过滤器、自定义数据替换过滤器、自定义时间过滤器、选择结构、选择练习、循环结构、循环练习、导入宏方式】(三)

👏作者简介：大家好，我是爱敲代码的小王，CSDN博客博主,Python小白 📕系列专栏：python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 📧如果文章知识点有错误…...

编程日记 2023/8/24 3:42:55

红黑树遍历与Redis存储

引言在计算机科学领域，红黑树（Red-Black Tree）是一种自平衡的二叉查找树，它能在O(log n)的时间复杂度内完成插入、删除和查找操作。由于其高效性和可预测性的性能，红黑树在许多领域都得到广泛应用。本文将重点介绍红…...

编程日记 2023/8/24 3:41:54

前端处理图片文件的方法

在项目开发过程中，有一个需求，需要前端对上传的图片进行处理，以字符串的形式传给后端，实现效果如下： 1.上传图片的组件在该项目中，使用了element plus组件库 <el-uploadv-model:file-list"fileL…...

编程日记 2023/8/24 3:40:50

「Java」《深入解析Java多线程编程利器：CompletableFuture》

《深入解析Java多线程编程利器：CompletableFuture》一、引言1. 对多线程编程的需求和挑战的介绍2. 介绍CompletableFuture的作用和优势二. CompletableFuture简介1. CompletableFuture是Java中提供的一个强大的多线程编程工具2. 与传统的Thread和Runnable相比的优…...

编程日记 2023/8/24 3:39:49

Docker容器与虚拟化技术：容器运行时说明与比较

目录一、理论 1.容器运行时 2.容器运行时接口 3.容器运行时层级 4.容器运行时比较 5.强隔离容器二、问题 1.K8S为何难以实现真正的多租户三、总结一、理论 1.容器运行时 （1）概念 Container Runtime 是运行于 k8s 集群每个节点中&#xff…...

编程日记 2023/8/24 3:38:48

vue导出文件流获取附件名称并下载(在response.headers里解析filename导出)

导出文件流下载，拦截器统一处理配置需求以往实现的方法（各自的业务层写方法）现在实现的方法（axios里拦截器统一配置处理）把文章链接复制粘贴给后端，让大佬自己赏阅。需求之前实现的导出都是各自的业务层…...

编程日记 2023/8/24 3:37:43

山东省图书馆典藏《乡村振兴战略下传统村落文化旅游设计》鲁图中大许少辉博士八一新书

山东省图书馆《乡村振兴战略下传统村落文化旅游设计》鲁图中大许少辉博士八一新书...

编程日记 2023/8/24 3:36:42

2023-08-19力扣每日一题-水题/位运算解法

链接： 2235. 两整数相加题意： ab 解： ab 补一个位运算写法，进位是(a&b)<<1，不进位的计算结果为a^b 实际代码： #include<iostream> using namespace std; int sum(int num1, int n…...

编程日记 2023/8/24 3:35:40

Hadoop学习：深入解析MapReduce的大数据魔力之数据压缩（四）

Hadoop学习：深入解析MapReduce的大数据魔力之数据压缩（四） 4.1 概述1）压缩的好处和坏处2）压缩原则 4.2 MR 支持的压缩编码4.3 压缩方式选择4.3.1 Gzip 压缩4.3.2 Bzip2 压缩4.3.3 Lzo 压缩4.3.4 Snappy 压缩4.3.5 压缩…...

编程日记 2023/8/24 3:34:39

LRU淘汰策略执行过程

1 介绍 Redis无论是惰性删除还是定期删除，都可能存在删除不尽的情况，无法删除完全，比如每次删除完过期的 key 还是超过 25%，且这些 key 再也不会被客户端访问。这样的话，定期删除和堕性删除可能都彻底的清理掉。如果…...

编程日记 2023/8/24 3:33:38

Kotlin 高阶函数详解

高阶函数在 Kotlin 中，函数是一等公民，高阶函数是 Kotlin 的一大难点，如果高阶函数不懂的话，那么要学习 Kotlin 中的协程、阅读 Kotlin 的源码是非常难的，因为源码中有太多高阶函数了。高阶函数的定义高阶函数的…...

编程日记 2023/8/24 3:31:33

DL——week2

要学明白的知识点： np.dot()的作用两个数组的点积，即对应元素相乘 numpy.dot(a,b,outNone) a: ndarray 数组 b: ndarray 数组 out: ndarray, 可选，用来保存dot（）的计算结果 numpy Ndarray对象 N维数组对象ndarray&am…...

编程日记 2023/8/24 3:30:32

如何撰写骨灰级博士论文？这是史上最全博士论文指导！

博士论文的写作是博士研究生主要要完成的工作。由于存在着较高的难度，较长的写作周期，以及在创新，写作规范，实际及理论意义等方面有着比较高的要求，博士论文的完成一般说来是有相当难度的。一篇好的博士论文不仅是一本…...

编程日记 2023/8/24 3:29:30

08.SpringBoot请求相应

文章目录 1 请求1.1 Postman1.2 简单参数1.2.1 原始方式1.2.2 SpringBoot方式1.2.3 参数名不一致 1.3 实体参数1.3.1 简单实体对象1.3.2 复杂实体对象 1.4 数组集合参数1.4.1 数组1.4.2 集合 1.5 日期参数1.6 JSON参数1.7 路径参数 2 响应2.1 ResponseBody注解2.2 统一响应结果…...

编程日记 2023/8/24 3:28:25

C#详解-Contains、StartsWith、EndsWith、Indexof、lastdexof

目录简介: 过程: 举例1.1 举例1.2 总结: 简介: 在C#中Contains、StarsWith和EndWith、IndexOf都是字符串函数。 1.Contains函数用于判断一个字符串是否包含指定的子字符串，返回一个布尔值（True或False）。 2.StartsWith函数用于判断一…...

编程日记 2023/8/24 3:27:24

目录 1. 用pipline上传数据2. 用 Pipeline 进行 Hetero SecureBoost 的训练和预测3. 用 Pipeline 构建神经网络模型3.1 Homo-NN Quick Start: A Binary Classification Task3.2 Hetero-NN Quick Start: A Binary Classification Task 4. 自定义数据集示例：实现一个简…...

编程日记 2023/8/24 3:26:23

Atlas 元数据管理

Atlas 元数据管理 1.Atlas入门 1.1概述元数据原理和治理功能，用以构建数据资产的目录。对这个资产进行分类和管理，形成数据字典。提供围绕数据资产的协作功能。表和表之间的血缘依赖字段和字段之间的血缘依赖 1.2架构图导入和导出&#xff1…...

编程日记 2023/8/24 3:25:21

编程题练习@8-23

分享8月23日两道编程题： 1 开幕式排列题目描述导演在组织进行大运会开幕式的排练，其中一个环节是需要参演人员围成一个环形。演出人员站成了一圈，出于美观度的考虑，导演不希望某一个演员身边的其他人比他低太多或者高太多。现…...

编程日记 2023/8/24 3:24:13

static相关知识点详解

文章目录一. 修饰成员变量二. 修饰成员方法三. 修饰代码块四. 修饰类一. 修饰成员变量 static 修饰的成员变量，称为静态成员变量，该变量不属于某个具体的对象，是所有对象所共享的。 public class Student {private String name;private sta…...

编程日记 2023/8/24 3:23:09

Redisson 分布式锁

Redis是基础客户端库，可用于执行基本操作。 Redisson是基于Redis的Java客户端，提供高级功能如分布式锁、分布式集合和分布式对象。 Redisson提供更友好的API，支持异步和响应式编程，提供内置线程安全和失败重试机制。实现步骤…...

编程日记 2023/8/24 3:22:08

继承（C++）

继承一、初识继承概念“登场”语法格式继承方式九种继承方式组合小结（对九种组合解释） 二、继承的特性赋值转换一一切片 / 切割作用域一一隐藏 / 重定义三、派生类的默认成员函数派生类的默认成员函数1. 构造函数2. 拷贝构造3. 赋值运算符重载4. …...

编程日记 2023/8/24 3:21:08

文心一言 VS 讯飞星火 VS chatgpt （80）-- 算法导论7.4 5题

五、如果用go语言，当输入数据已经“几乎有序”时，插入排序速度很快。在实际应用中，我们可以利用这一特点来提高快速排序的速度。当对一个长度小于 k 的子数组调用快速排序时，让它不做任何排序就返回。当上层的快速排序调用返回后&…...

编程日记 2023/8/24 3:20:07

SpringCloud 概述

文章目录 SpringCloud 概述一、微服务中的相关概念1、服务注册与发现2、负载均衡3、熔断4、链路追踪5、API网关二、SpringCloud的介绍三、SpringCloud的架构1、SpringCloud中的核心组件（1）Spring Cloud Netflix组件（2）Spring Clo…...

编程日记 2023/8/24 3:19:04

Apache ShenYu 学习笔记一

1、简介这是一个异步的，高性能的，跨语言的，响应式的 API 网关。官网文档：Apache ShenYu 介绍 | Apache ShenYu仓库地址：GitHub - apache/shenyu: Apache ShenYu is a Java native API Gateway for service proxy, pr…...

编程日记 2023/8/24 3:18:02

uniapp 禁止遮罩层下的页面滚动

使用 touchmove.stop.prevent"toMoveHandle" 事件修饰符若需要禁止蒙版下的页面滚动，可使用 touchmove.stop.prevent"moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹…...

编程日记 2023/8/24 3:16:57

postgresql 分组

postgresql 数据汇总分组汇总聚合函数注意总结分组统计总结高级分组总结分组汇总聚合函数聚合函数（aggregate function）针对一组数据行进行运算，并且返回单个结果。PostgreSQL 支持以下常见的聚合函数： • AVG - 计算一…...

编程日记 2023/8/24 3:15:56

RT1052的EPWM

文章目录 1 EPWM介绍1.1 引脚1.2 时钟1.3 比较寄存器 2 函数 1 EPWM介绍 RT1052 具有 4 个 eFlexPWM(eFlexWM1~eFlex_PWM4)。每个 eFlexPWM 可以产生四路互补 PWM即产生 8 个 PWM，也可以产生相互独立的 PWM 波。四路分别是模块0-3每个 eFlexPWM 具有各自的故障检…...

编程日记 2023/8/24 3:14:53

k8s 安装istio (一)

前置条件已经完成 K8S安装过程十：Kubernetes CNI插件与CoreDNS服务部署部署 istio 服务网格与 Ingress 服务用到了 helm 与 kubectl 这两个命令行工具，这个命令行工具依赖 ~/.kube/config 这个配置文件，目前只在 kubernetes master 节点中…...

编程日记 2023/8/24 3:13:51

哈尔滨建站怎么做/球队排名世界

剑指offer-删除链表中重复的结点C实现原题链接 #include <iostream>using namespace std;struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), next(nullptr) {} };class Solution { public:ListNode *delete_duplicate(ListNode *head) {// 若…...

编程日记 2024/11/16 15:54:44

成品网站多少钱/网络营销策划需要包括哪些内容

中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。官方下载地址&#xff1…...

编程日记 2024/11/16 15:41:28

房地产公司网站下载/网站seo搜索引擎优化教程

一、RPM Package Manager（RPM软件包管理器）的缩写， rpm是由RedHat开发的软件包管理方式，使用rpm可以方便的进行软件的查询、安装、升级、校验等工作,现在包括OpenLinux、S.u.S.E.以及Turbo Linux等Linux的分发版本都有采用,但是…...

编程日记 2024/11/16 14:35:05

活动手机网站开发/营销型网站特点

今天我们学习几个常用的Dockerfile指令，在 http://docs.docker.com/reference/builder/可以查看Dockerfile中能使用的全部指令的清单。一、CMD指令 CMD指令用于指定一个容器启动时要运行的命令，这与RUN指令有点类似，但RUN指令是指定镜像被…...

编程日记 2024/11/16 13:58:04

网站多条件筛选 html/营销型企业网站建设的内容

增加或减少数据节点的数量和NoOfReplicas（即副本数，通过管理节点的config.ini配置文件来设置）有关，一般来说NoOfReplicas是2，那么增加或减少的数量也应该是成对的，否则要设置另外的NoOfReplicas。首先必须确…...

编程日记 2024/11/16 12:03:54

怎样自创网站/哪个搜索引擎最好用

innerText，outerText，innerHTML，outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大…...

编程日记 2024/11/16 9:09:21

目录

一，路由原理（hash）

二，路由安装和使用（vue2）

三，路由跳转

四，路由的传参和取值

五，嵌套路由

六，路由守卫

最后

相关文章：