Vue再学习13——路由

路由的基本使用

暴露一个路由器

 路由使用router中路由和这里和a标签不一样!注意对比。router-link是对a标签的封装

router-link做跳转,由router-view指定展示的位置。

在每个页面中持有route和router对象,route是各自的,router是全局的

 

嵌套(多级)路由

 通过children来添加子路由,对于子路由的path,不需要添加斜杠,因为内部已经做好了

路由query传参

这里可以用url传参,也可以通过query进行封装传参。

通过$route.query.进行参数获取

 

路由命名

路由命名可以简化跳转

在跳转时通过name来确定往哪跳

路由params参数

方法1

方法2

通过路由占位符传参,数据存储在params中

 注意,对于路由params传参,是不能使用path的,只能用name

路由props

普通props使用:

我们这里把props写死:

1、设置props:

2、接收props:

动态的props

1、把所有params中的参数转为props

 2、在props中直接使用

props函数

在之前的动态props中只能接收params的参数转为props,对于query,我们可以采用函数的方式在props中转化

采用解构赋值的方式进行赋值

路由跳转方式

对于路由来说有两种方式进行跳转:

Push,replace(一个是压入栈中,一个是替换当前路由栈中的路由)

编程式路由导航

1、路由栈的压栈和替换

 内部设置和router-link是一样的

2、路由栈的回退和上一步

3、通过步骤确定跳战到哪里

缓存路由组件

通过keep-alive保存路由中的组件不被销毁,但是这样太浪费内存。

通过include包含组件的的name,来确定哪些组件需要缓存。

是这里的name

 缓存多个的话,用数组

路由组件特有生命周期钩子

缓存的路由组建,在切换的时候,调用

路由守卫

前置路由收尾

只有满足一定的要求的路由才能进行跳转,一般用于权限访问。

路由守卫是全局的,他的调用一般是在跳转之前做校验

 跳转限制可以这么写为了更好地对路由进行过滤,我们可以在路由中定义一些属性。在meta中可以加入我们自定义的属性 后置路由守卫 后置路由收尾作用:做一些路由跳转的兜底工作,比如网页title的修改,只有跳转成功的才能进行修改

 

 

独享路由守卫

单独一个路由再切换时调用 ,只有进入前,没有进入后

 

组件内路由守卫

必须是通过路由进入才能触发

 

 

url的 hash模式和history模式

 

当带有#时,说明路由开启了hash模式,#后的值不做为路径给到服务器

当进入history模式,路径中不带#

通过VueRouter中的mode进行开关

 

对于hash模式,其兼容性要高于history模式。

Eg:网页的刷新,对于hash模式,没有影响,因为#后的都是hash值,服务器不解析。但是对于history模式,则需要解析,在跳转多个路由之后,history会去请求路径对应的静态数据,但是并不存在

其他:

vue打包

在服务器中,运行的前端页面是不带.vue开头的文件的,都是css,js,html。所以通过执行npm run build,进行打包,将.vue转为标准网页然后打包。

对于vue的打包,只关注src中的内容。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值