Vue-Router4 学习笔记

一、URL的hash

前端路由是如何做到URL和内容进行映射呢?监听URL的改变。

URL的hash也就是锚点(#), 本质上是改变window.location的href属性;
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

在这里插入图片描述
在这里插入图片描述
hash的优势就是兼容性更好,在老版IE中都可以运行,但是缺陷是有一个#,显得不像一个真实的路径。

二、HTML5的History

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

三、认识vue-router

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得非常容易。

vue-router是基于路由和组件的

  • 路由用于设定访问路径, 将路径和组件映射起来.
  • 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

3.1安装Vue Router:

npm install vue-router@4

3.2 路由的使用步骤

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

3.3 路由的默认路径

我们这里还有一个不太好的实现:

  • 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容;
  • 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以;

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?
我们在routes中又配置了一个映射:
在这里插入图片描述
在这里插入图片描述

  • path配置的是根路径: /
  • redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

3.4 history模式

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

3.5 router-link

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

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

四、路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载:
在这里插入图片描述

  • 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效;
  • 也可以提高首屏的渲染效率;

其实这里还是我们前面讲到过的webpack的分包知识,而Vue Router默认就支持动态来导入组件:
在这里插入图片描述

  • 这是因为component可以传入一个组件,也可以接收一个函数,该函数 需要返回一个Promise;
  • 而import函数就是返回一个Promise;

其实webpack从3.x开始支持对分包进行命名(chunk name):
在这里插入图片描述

const routes = [{path: '/',redirect: '/home'},{path: '/home',component: () => import(/* webpackChunkName: "home-chunk" */'../pages/Home')},{path: '/about',component: () => import(/* webpackChunkName: "about-chunk" */'../pages/About')}
]

五、路由的其他属性

name属性:路由记录独一无二的名称;
meta属性:自定义的数据
在这里插入图片描述

六、动态路由基本匹配

很多时候我们需要将给定匹配模式的路由映射到同一个组件:

  • 例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但是用户的username是不同的;
  • 在Vue Router中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数;
    在这里插入图片描述

6.1 获取动态路由的值

那么在User中如何获取到对应的值呢?

  • 在template中,直接通过 $route.params获取值;
  • 在created中,通过 this.$route.params获取值;
  • 在setup中,我们要使用 vue-router库给我们提供的一个hook useRoute; 该Hook会返回一个Route对象,对象中保存着当前路由相关的值;
    在这里插入图片描述

6.2 匹配多个参数

在这里插入图片描述

6.3 NotFound

对于哪些没有匹配到的路由,我们通常会匹配到固定的某个页面

  • 比如NotFound的错误页面中,这个时候我们可编写一个动态路由用于匹配所有的页面;
    在这里插入图片描述
    在这里插入图片描述

6.4 匹配规则加*

注意:我在/:pathMatch(.*)后面又加了一个 *;
它们的区别在于解析的时候,是否解析 /:

在这里插入图片描述

七、路由的嵌套

什么是路由的嵌套呢?

  • 目前我们匹配的Home、About、User等都属于底层路由,我们在它们之间可以来回进行切换;
  • 但是呢,我们Home页面本身,也可能会在多个组件之间来回切换:
    比如Home中包括Product、Message,它们可以在Home内部来回切换;
  • 这个时候我们就需要使用嵌套路由,在Home中也使用 router-view 来占位之后需要渲染的组件;

7.1 路由的嵌套配置

在这里插入图片描述

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

八、代码的页面跳转

在这里插入图片描述

九、query方式的参数

在这里插入图片描述

<template><div id="app"><p><router-link to="/home">home</router-link><router-link to="/about">about</router-link><router-link to="/user/zep">user</router-link></p><div><button @click="jumpToAbout">关于</button><button @click="forwardOneStep">前进一步</button></div><router-view></router-view></div>
</template>
<script>
import {useRouter} from "vue-router";
export default {name: 'App',// methods: {//   jumpToAbout() {//     this.$router.push('/about')//   }// }setup() {const router = useRouter()const jumpToAbout = () =>  {// router.push('/about')router.push({path: '/about',query: {name: 'zep',age: 22}})}const forwardOneStep = () => {router.go(1)}return {jumpToAbout,forwardOneStep}}
}
</script><style scoped>
.router-link-active {color: red;
}
</style>

十、替换当前的位置

使用push的特点是压入一个新的页面,那么在用户点击返回时,上一个页面还可以回退,但是如果我们希望当前页面是一个替换操作,那么可以使用replace:
在这里插入图片描述

十一、页面的前进后退

在这里插入图片描述

十二、router-link的v-slot(vue-router4 新增)

在vue-router3.x的时候,router-link有一个tag属性,可以决定router-link到底渲染成什么元素

  • 但是在vue-router4.x开始,该属性被移除了;
  • 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容;

v-slot如何使用呢?
首先,我们需要使用custom表示我们整个元素要自定义

  • 如果不写,那么自定义的内容会被包裹在一个 a 元素中;
    在这里插入图片描述

其次,我们使用v-slot来作用域插槽来获取内部传给我们的值:

  • href:解析后的 URL;
  • route:解析后的规范化的route对象;
  • navigate:触发导航的函数;
  • isActive:是否匹配的状态;
  • isExactActive:是否是精准匹配的状态;
    在这里插入图片描述
    在这里插入图片描述

12.1 router-view的v-slot

router-view也提供给我们一个插槽,可以用于 <transition><keep-alive> 组件来包裹你的路由组件:

  • Component:要渲染的组件;
  • route:解析出的标准化路由对象;
    在这里插入图片描述

在这里插入图片描述

12.2 动态添加路由

某些情况下我们可能需要动态的来添加路由:

  • 比如根据用户不同的权限,注册不同的路由;
  • 这个时候我们可以使用一个方法 addRoute;

如果我们是为route添加一个children路由,那么可以传入对应的name:
在这里插入图片描述

12.3 动态删除路由

删除路由有以下三种方式:

  • 方式一:添加一个name相同的路由;
  • 方式二:通过removeRoute方法,传入路由的名称;
  • 方式三:通过addRoute方法的返回值回调;
    在这里插入图片描述

路由的其他方法补充:

  • router.hasRoute():检查路由是否存在。
  • router.getRoutes():获取一个包含所有路由记录的数组。

十三、路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

全局的前置守卫beforeEach是在导航触发时会被回调的:
它有两个参数:

  • to:即将进入的路由Route对象;
  • from:即将离开的路由Route对象;

它有返回值:

  • false:取消当前导航;
  • 不返回或者undefined:进行默认导航;
  • 返回一个路由地址:
    可以是一个string类型的路径;
    可以是一个对象,对象中包含path、query、params等信息;
    在这里插入图片描述

可选的第三个参数:next

  • 在Vue2中我们是通过next函数来决定如何进行跳转的;
  • 但是在Vue3中我们是通过返回值来控制的,不再推荐使用next函数,这是因为开发中很容易调用多次next;

13.1 登录守卫功能

比如我们完成一个功能,只有登录后才能看到其他页面:
在这里插入图片描述

13.2 其他导航守卫

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

转:VC中MessageBox的常见用法

一、关于MessageBox 消息框是个很常用的控件&#xff0c;属性比较多&#xff0c;本文列出了它的一些常用方法&#xff0c;及指出了它的一些应用场合。 1.MessageBox("这是一个最简单的消息框&#xff01;"); 2.MessageBox("这是一个有标题的…

python subprocess communicate_Python中的Subprocess模块

以前我一直用os.system()处理一些系统管理任务,因为我认为那是运行linux命令最简单的方式.我们能从Python官方文档里读到应该用subprocess 模块来运行系统命令.subprocess模块允许我们创建子进程,连接他们的输入/输出/错误管道&#xff0c;还有获得返回值。subprocess模块打算来…

Vuex4学习笔记

一、Vuex的状态管理 二、Vuex的安装 我们这里使用的是vuex4.x&#xff0c;安装的时候需要添加 next 指定版本&#xff1b; npm install vuexnext三、创建Store 每一个Vuex应用的核心就是store&#xff08;仓库&#xff09;&#xff1a; store本质上是一个容器&#xff0c;它…

在局域网搭建一个带 web 操作页面的 git 版本服务器 - Gitlab

以下内容为本人的著作&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/Br0ETd_aNffEZoTAba03Bw 最近到了新团队&#xff0c;只有几部新电脑&#xff0c;然后啥也没有了。老江说需要一个管理工程代码的 git 版本服务器&…

div中iframe高度自适应问题

网页分为上、中、下三部分&#xff0c;上、下高度固定中间高度自适应&#xff1b;中间分为左、右两部分&#xff0c;左边宽度固定&#xff0c;右边宽度自适应。现在右侧div是宽度和高度都是自适应&#xff0c;右侧div里有个IFrame&#xff0c;想让IFrame自适应外部div的宽度和高…

python日志模块备份_Python Logging模块 输出日志颜色、过期清理和日志滚动备份

#coding:utf-8importloggingfrom logging.handlers importRotatingFileHandler # 按文件大小滚动备份import colorlog #控制台日志输入颜色importtimeimportdatetimeimportoscur_path os.path.dirname(os.path.realpath(__file__)) #log_path是存放日志的路径log_path os.path…

JS高级——手写call()、apply()、bind()

0、call、apply、bind的区别 bind&#xff0c;call&#xff0c;apply的作用都是用来改变this指向的 call方法 call方法的第一个参数是this的指向 后面传入的是一个参数列表&#xff08;注意和apply传参的区别&#xff09;。当一个参数为null或undefined的时候&#xff0c;函数中…

ubyntu 链接mysql_ubuntu mysql远程连接

ubuntu mysql远程连接http://blog.csdn.net/helen_shw/archive/2010/01/22/5224524.aspxkikikiki-desktop:/etc/apache2mysql error number 2003Cant connect to MySQL server xxx.xxx.xxx.xxx (10061)在ubuntu 9.04中默认安装了mysql&#xff0c;默认只能本地访问&#xff0c;…

js文章QQ空间分享

<!--示例一--> <div id"ckepop" classfeixiangjias> <a href"javascript:" class"jiathis jiathis_txt jtico jtico_jiathis" target"_blank">分享到&#xff1a;</a> <a class"jiathis_button_qzo…

JS高级——深入剖析函数中的this指向问题

一、this到底指向什么呢&#xff1f; 我们先说一个最简单的&#xff0c;this在全局作用域下指向什么&#xff1f; 这个问题非常容易回答&#xff0c;在浏览器中测试就是指向window 但是&#xff0c;开发中很少直接在全局作用于下去使用this&#xff0c;通常都是在函数中使用…

日志测试法

/*** 写入日志*/ function write2log($content,$filenamelog) {$myfile fopen($filename.".txt", "a") or die("Unable to open file!");$txt date(Y-m-d H:i:s)."\t".$content."\r\n";fwrite($myfile, $txt);fclose($myf…

JS高级——arguments参数详解

一、认识arguments arguments 是一个 对应于 传递函数的参数 的 类数组(array-like)对象。 array-like意味着它不是一个数组类型&#xff0c;而是一个对象类型&#xff1a; 但是它却拥有数组的一些特性&#xff0c;比如说length&#xff0c;比如可以通过index索引来访问&…

php 函数有命名空间吗_解析 ThinkPHP 的命名空间

php中文网最新课程每日17点准时技术干货分享大家都知道由于PHP语法里不支持函数重载机制&#xff0c;如果一个应用里有两个同名的方法&#xff0c;怎么办呢&#xff1f;在Yii 框架为了避免名字重复引起问题&#xff0c;全部的类前边都有 C 字样&#xff0c;而在ThinkPHP里就引入…

JS高级——纯函数、柯里化(手写自动柯里化函数)、组合函数(手写自动组合函数)

一、理解JavaScript纯函数 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念&#xff1b; 在react开发中纯函数是被多次提及的&#xff1b;比如react中组件就被要求像是一个纯函数&#xff08;为什么是…

(五)uboot移植补基础之shell

1、shell介绍&#xff1a;shell是操作系统的终端命令行 (1)shell可以理解为软件系统提供给用户操作的命令行界面&#xff0c;可以说它是人机交互的一种方式。(2)我们可以使用shell和操作系统、uboot等软件系统进行交互。具体来说就是我们通过shell给软件系统输入命令然后回车执…

三包围结构的字是什么样的_拼音带kun的字大全_50个拼音含kun的字组词

原标题&#xff1a;拼音带kun的字大全_50个拼音含kun的字组词1、昆(kūn)&#xff0c;8画&#xff0c;上下结构&#xff0c;部首&#xff1a;曰(日)组词&#xff1a;昆虫(kūn chng) | 昆曲(kūn qǔ) | 昆山(kūn shān) | 昆仲(kūn zhng) | 昆吾(kūn w) | 昆仑(kūn ln) |2…

JS高级——with语句、eval函数、严格模式

一、with语句 with语句的作用&#xff1a;扩展一个语句的作用域链。 不建议使用with语句&#xff0c;因为它可能是混淆错误和兼容性问题的根源。并且&#xff0c;在浏览器开启严格模式下&#xff0c;使用with会报错&#xff1a; 二、eval函数 eval是一个特殊的函数&#x…

写 一个PHP脚本遇到的问题总结

在项目中&#xff0c;因为之前的人员&#xff0c;基础数据没有处理好&#xff0c;后面需要写一个脚本来处理这个问题&#xff0c;经验少&#xff0c;总结如下&#xff1a;1.在linux下直接连接跑处理MySQL数据的脚本&#xff0c;要用PDO的方式连接数据库&#xff0c;长时间在框架…

nts包如何下周 php_windows下PHP7安装方法(ts版和nts版)

1.首先到官网下载PHP的Zip安装包http://windows.php.net/download/(1)VC14 x64 Non Thread Safe (2015-Dec-17 00:17:18)(2)VC14 x64Thread Safe (2015-Dec-17 00:17:17)下载的是这两个版本&#xff0c;可以分别解压到C盘根目录目录存放如下NTS: C:/phpTS:C:/php-tsVC14 需要自…

JS面向对象——Object.defineProperty

一、JavaScript的面向对象 JavaScript其实支持多种编程范式的&#xff0c;包括函数式编程和面向对象编程&#xff1a; JavaScript中的对象被设计成一组属性的无序集合&#xff0c;像是一个哈希表&#xff0c;有key和value组成&#xff1b;key是一个标识符名称&#xff0c;val…