vue-Router(学习笔记)(cli4)
发布日期:2021-05-10 07:36:20 浏览次数:20 分类:精选文章

本文共 635 字,大约阅读时间需要 2 分钟。

1. 认识路由

1. 什么是路由

  1. 网络工程里面的术语
  2. 路由(routing)就是通过互联的网络把信息从原地址传输到目的地址的活动。

在这里插入图片描述

  1. 路由提供了两种机制:路由传送
  • 路由是决定数据包从来源到目的地的路径。
  • 传送将输入端的数据转移到合适的输出端
  1. 路由中有个非常重要的概念叫路由表
  • 路由表本质上就是一个映射表,决定了数据包的指向

2. vue-router的基本使用

1.router-link和router-view

在这里插入图片描述

2. 动态路由

配置路由的时候传递参数

在这里插入图片描述

3. 路由懒加载

在这里插入图片描述

在这里插入图片描述
懒加载之前所有的业务的代码都放在app.js里面
在这里插入图片描述
懒加载之后,业务代码被分离出来,在需要的时候才被请求
在这里插入图片描述

3. vue-router嵌套路由

在这里插入图片描述

比如在home路由的下面添加两个子路由
在这里插入图片描述

4. vue-router参数传递

在这里插入图片描述

在这里插入图片描述

5. vue-router导航守卫

在这里插入图片描述

了解router.beforeEach函数

router.beforeEach((to, from, next) => {     console.log(to);  // 从from跳转到to  document.title = to.matched[0].meta.title    // 必须要调用next  next();})

在这里插入图片描述

我将 to 打印出来。
我们可以使用里面的元数据进行我们想要完成的操作

什么是meta:描述数据的数据,路由本身已经是一个数据了,所以想要定义路由相关的数据要在路由里面配置meta

在这里插入图片描述

6. keep-alive

在这里插入图片描述

上一篇:vscode中将html,css,js代码首行改成2空格缩进
下一篇:js实现商品筛选功能

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2025年04月21日 07时17分43秒