• 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中的内容。

  • 相关阅读:
    hdlbits系列verilog解答(向量5)-19
    介绍各个PHP版本一些特性知识点
    【逆向】Base64编码解码及逆向识别
    为什么需要线程池?什么是池化技术?
    数据库课程设计——学籍管理系统
    重装了电脑系统,推荐一些 Windows 系统装机必备软件
    Vue2 + Echarts实现3D地图下钻
    python+pytest接口自动化(15)-日志管理模块loguru简介
    【计算机视觉(CV)】基于图像分类网络VGG实现中草药识别(二)
    制作一个简单HTML游戏网页(HTML+CSS)仿龙之谷网络游戏官网
  • 原文地址:https://blog.csdn.net/u011486491/article/details/125896586