vue-router使用_vue使用router-程序员宅基地

技术标签: Vue  vue.js  

一、vue-router基本使用

1.1 安装vue-router

	npm install vue-touter --save

1.2 配置路由信息

	在./src目录下新建router文件夹,然后再改文件夹底下新建index.js文件,
	然后在main.js导入./router/index

在这里插入图片描述
在这里插入图片描述

1.3 使用vue-router

1.3.1 创建路由组件

创建两个不同的组件
在这里插入图片描述

1.3.2 配置路由映射:路由和组件之间的映射关系

在这里插入图片描述
路由的重定向
在这里插入图片描述

1.3.3 使用路由:通过<router-link / >,<router-view / >

在这里插入图片描述

1.3.4 动态路由

在路由配置信息中加上需要的动态路由
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3.5 路由懒加载

官网:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

可以在路由配置里直接写
在这里插入图片描述
也可以在外部定义
在这里插入图片描述
在这里插入图片描述

二、vue-router嵌套路由

首先新建两个组件
在这里插入图片描述
如果我想在one路由嵌套子路由,那么在./router/index.js写上
在这里插入图片描述
既然我是在one路由嵌套子路由的,那么就需要在One组件里写上
在这里插入图片描述
同时也可以给嵌套路由重定向
在这里插入图片描述

三、vue-router参数传递

3.2 params方式传递参数

在前文中使用的动态路由时,就是使用params的方式来传递参数;
① 在路由配置文件中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
③ 取值
注意,在获取参数值的时候是this.$route.params
在这里插入图片描述

3.2 query方式传递参数

①在<router-link / >动态绑定query
在这里插入图片描述
②取值
在这里插入图片描述

3.3 使用编程式方法传递参数


在这里插入图片描述

在这里插入图片描述
③取值
在这里插入图片描述

四、vue-router导航守卫

4.1 全局前置守卫

语法:router.beforeEach((to,from,next) => {});
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

全局前置守卫接收三个参数:

  • to:将要进入的目标路由对象
  • from:从当前正要离开的路由
  • next:一定要调用该方法resolve 这个钩子
  • 在这里插入图片描述

4.2 全局后置守卫

语法:router.afterEach((to,from) => {})
和全局前置守卫区别的是,后置守卫不会接收next();
在这里插入图片描述

4.3 路由独享守卫

语法:在路由配置信息里,beforEnter: (to,from,next) => {}
在进入某一个路由里面才会触发,
该守卫的参数和全局前置守卫参数时一致的
在这里插入图片描述

4.4 组件内守卫

在进入某个路由组件内时
在这里插入图片描述
注意:beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
在这里插入图片描述

在另外两个守卫里,由于this已经可用了,所以 不支持 传递回调了,也没有必要了

五、keep-alive

5.1 keep-alive的使用

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重新渲染;
在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态,这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态。
①,将<router-view / ><keep-alive / >包裹;
在这里插入图片描述
②当期们需要从 one路由进入其他路由时,再返回时希望保留one路由的信息
在这里插入图片描述

5.2 keep-alive的属性

5.2.1 include

字符串或者正则表达式,表示只有匹配的组件会被缓存
在这里插入图片描述
默认表示所有组件都会被缓存

5.2.2 exclude

字符串或者正则表达式,表示匹配的组件都不会被缓存
在这里插入图片描述
这里的One,Two,就是对应组件的name
在这里插入图片描述

六、<router-link / >补充

<router-link / >是vue本身已经全局注册的组件,组件除了to属性,还有其他一些属性

6.1 to属性

表示目标路由,这里可以写入一个字符串,也可以动态绑定
在这里插入图片描述

6.2 tag属性

tag属性默认值 是<a />,当是默认值时,可以省略不写;
如果我们不希望<router-link / >渲染成<a />标签时,可以使用tag属性来指定想要渲染的效果
在这里插入图片描述

6.3 replace属性

replace属性默认值是false;
设置 replace 属性时,会调用 router.replace(),也就是在浏览器的返回按钮禁用,replace不会留下history记录
在这里插入图片描述

6.4 active-class属性

active-class属性默值是router-link-active
<router-link / >匹配路由成功时,会自动给当前元素设置一个router-link-active的class;
在这里插入图片描述
如果想要修改这个类名(觉得太长了),那么可以
在这里插入图片描述
在这里插入图片描述
如果有许多地方要修改的话,写起来很麻烦且重复
在这里插入图片描述
那么此时可以在路由文件./route/index.js写上
在这里插入图片描述

6.5 不使用<router-link / >来实现路由切换

在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41223530/article/details/120672295

智能推荐

FastDFS的配置、部署与API使用解读(4)FastDFS配置详解之Client配置-程序员宅基地

文章浏览阅读78次。一种方式是通过调用ClientGlobal类的初始化方法对配置文件进行加载,另一种是通过调用API逐一设置配置参数。后一种方式对于使用Zookeeper等加载属性的方式很方便。 1. 加载配置文件: StringconfigFileName="con...

解决torch.from_numpy报错 (ValueError)-程序员宅基地

文章浏览阅读3.9k次。在使用torch.from_numpy函数时报错:ValueError: At least one stride in the given numpy array is negative, and tensors with negative strides are not currently supported. (You can probably work around this by making a copy of your array with array.copy().)

内存分配方式,堆区,栈区,new/delete/malloc/free_java栈堆方法区常量区规则-程序员宅基地

文章浏览阅读1.1w次,点赞7次,收藏50次。1.内存分配方式内存分配方式有三种:[1]从静态存储区域分配。内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在。例如全局变量,static变量。[2]在栈上创建。在执行函数时,函数内局部变量的存储单元都可以在栈上创建,函数执行结束时这些存储单元自动被释放。栈内存分配运算内置于处理器的指令集中,效率很高,但是分配的内存容量有限。[3]从堆上分配_java栈堆方法区常量区规则

GO-程序员宅基地

文章浏览阅读150次。2007年,受够了C++煎熬的Google首席软件工程师Rob Pike纠集Robert Griesemer和Ken Thompson两位牛人,决定创造一种新语言来取代C++, 这就是Golang。出现在21世纪的GO语言,虽然不能如愿对C++取而代之,但是其近C的执行性能和近解析型语言的开发效率以及近乎于完美的编译速度,已经风靡全球。特别是在云项目中,大部分都使用了Golang来开发,不得不说,...

封装集合Stream常用功能,让代码更简洁,不依赖任何第三方,复制即用_steam流封装集合-程序员宅基地

文章浏览阅读684次,点赞3次,收藏3次。提前最大家,牛年大吉,代码无Bugimport java.util.*;import java.util.function.*;import java.util.stream.Collectors;import java.util.stream.Stream;/** * @Author: 小胖 * @Version: 1.0 * @Description: 集合流工具类 * @Date: 2021/02/09 09:10 **/@SuppressWarnings("all")pu_steam流封装集合

BZOJ2085[Poi2010] Hamsters-程序员宅基地

文章浏览阅读491次。BZOJ2085[Poi2010] Hamsters Description Tz养了一群仓鼠,他们都有英文小写的名字,现在Tz想用一个字母序列来表示他们的名字,只要他们的名字是字母序列中的一个子串就算,出现多次可以重复计算。现在Tz想好了要出现多少个名字,请你求出最短的字母序列的长度是多少。 Input 输入:第一行n(1<=n<=

随便推点

博主教您如何免费获得斐讯K2—1200M千兆家用双频智能无线路由器wifi穿墙(亲测有效)...-程序员宅基地

文章浏览阅读519次。前言 上个月3月3号的时候,同事推荐说买可以0元购买斐讯K2路由器,看办公室人员有几个买了,博主也半信半疑的尝试买了一个,试试看是不是真的能返还钱 截止今天,钱终于退回来了。所以才敢给大家推荐,顺便给大家详细介绍下流程。 看斐讯官网描述,现在还有活动,京东上面斐赛克斯专卖店可以。..._斐讯k2如何连接千兆

seaborn可视化学习之categorial visualization-程序员宅基地

文章浏览阅读313次。seaborn是一个做数据可视化效果很棒的库。在看了官方tutorial之后,尝试用Iris鸢尾花数据集实践一下categorical visualization,也就是数据按类别进行可视化。首先介绍一下Iris鸢尾花数据集,内容摘自百度百科:Iris数据集是常用的分类实验数据集,由Fisher, 1936收集整理。“Iris也称鸢尾花卉数据集,是一类多重变量分析的数据集。数据集包含150个数...

ionic3 实现拍照与从相册选择功能-程序员宅基地

文章浏览阅读1.7k次。参考了很多网上的资料,但是每个人遇到的问题都不一样,我这里出现的问题,可能是node版本,还有插件版本之类的问题,问题以及解决方式可以看这个图。一、插件依赖引入 (1)配置相机在控制行输入命令:ionic cordova plugin add cordova-plugin-cameranpm install --save @ionic-native/camera在ap...

如何在交叉表中隐藏列-程序员宅基地

文章浏览阅读422次。下面介绍一下如何在交叉表中隐藏一列:例如:我要隐藏下面的交叉表中的这一列:首先,设置该列的box type属性为none:但是,设置之后表样却成了参差不齐的样子:这个时候,我们应该怎么办呢?第一步:隐藏交叉表左上角的表头,同样是将box type 设置成none:设置完成后,显示如下:然后再将一个Crosstab Space(或Crosstab Space with f...

iPhone电池健康度是什么_iphone电池健康度是什么意思-程序员宅基地

文章浏览阅读2k次。当你的iPhone特别耗电,使用没多久就开始低电量警告时,说明你的设备可能电池老化了,也就是到了该更换iPhone电池时候。但很多时候大家都会要求先看iPhone电池健康度,这又要怎么确认呢?iPhone循环次数怎么算?苹果对电池健康度描述为:“当经过500次完整充电循环后,电池蓄电量可维持达原有容量的80%”。也就是说,除了要注意循环次数以外,通过查询iPhone电池健康度即可得知设备的电池是否需要更换。需要注意的是,如果你的设备还在一年保修范围内可免费更换瑕疵电池。如果超过..._iphone电池健康度是什么意思

使用火焰图(FlameGraph)分析程序性能-程序员宅基地

文章浏览阅读1.9w次,点赞18次,收藏89次。火焰图概念火焰图(FlameGraph)是 svg 格式的矢量图,是先通过 perf 工具分析得到的结果,并将其生成的具有不同层次且支持互动的图片,看起来就像是火焰,这也正是它的名字的由来。其表现形式大概如下所示:需要有以下几点注意:纵向(Y 轴)高低不平,表示的是函数调用栈的深度。每一层都是一个函数。调用栈越深,火焰就越高,顶部就是正在执行的函数,下方都是它的父函数。横向(X 轴)表示该函数执行消耗的时间,横向上会按照字母顺序排序,而且如果是同样的调用会做合并(注意:如果一个函数在 X