学习Vue(4)

文章目录

  • 路由
    • 简介
    • 基本使用
      • 模式设置
      • 注意点
    • 组件
      • 一般组件
      • 路由组件
    • 多级路由
      • 总结
    • 路由传参
      • 参数传参
      • query
        • 总结
      • params参数
        • 总结
    • 命名路由
      • 总结
    • props
      • 对象写法
      • 设为true
      • props为函数
    • 按钮实现跳转和前进后退
    • 独有的生命钩子
      • activated()
      • deactivated()
    • 路由守卫
      • 前置路由守卫
      • 后置路由守卫
      • 独享路由守卫
      • 通过路由规则
    • 两种mode

路由

实现的是SPA应用,单页面应用
vue-router4用于vue3
vue-router3用于vue2

简介

在这里插入图片描述

基本使用

main.js
学习Vue(4)_第1张图片

学习Vue(4)_第2张图片
在这里插入图片描述

模式设置

学习Vue(4)_第3张图片

注意点

学习Vue(4)_第4张图片

组件

一般组件

自己写上去的组件

路由组件

使用router跳转展示的组件

多级路由

注意children里不加斜杠
学习Vue(4)_第5张图片

总结

学习Vue(4)_第6张图片

路由传参

?后面才是参数
在这里插入图片描述
这样来的
在这里插入图片描述

在这里插入图片描述

参数传参

在这里插入图片描述

query

学习Vue(4)_第7张图片

总结

学习Vue(4)_第8张图片

params参数

在这里插入图片描述
在这里插入图片描述
这里只能用name,用path就要报错。
学习Vue(4)_第9张图片

总结

学习Vue(4)_第10张图片
学习Vue(4)_第11张图片

命名路由

学习Vue(4)_第12张图片

在这里插入图片描述

总结

学习Vue(4)_第13张图片
学习Vue(4)_第14张图片

props

对象写法

用得不多,si数据

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

设为true

在这里插入图片描述

props为函数

学习Vue(4)_第15张图片
解构赋值

学习Vue(4)_第16张图片
连续解构赋值
学习Vue(4)_第17张图片

按钮实现跳转和前进后退

调用this.router上的方法

学习Vue(4)_第18张图片

独有的生命钩子

activated()

组件被激活,时调用

deactivated()

组件失活了时被调用

路由守卫

前置路由守卫

学习Vue(4)_第19张图片

后置路由守卫

可以设置title
学习Vue(4)_第20张图片

独享路由守卫

只有前置
学习Vue(4)_第21张图片

通过路由规则

用得不多

学习Vue(4)_第22张图片
学习Vue(4)_第23张图片

两种mode

学习Vue(4)_第24张图片

你可能感兴趣的:(vue.js,学习,javascript)