Vue3--Vue Router详解--学习笔记

1. 认识vue-router

Angular的ngRouter
React的ReactRouter
Vue的vue-router

Vue Router 是Vue.js的官方路由：

  • 它与Vue.js核心深度集成，让Vue.js构建单页应用（SPA）变得非常容易；
  • 目前Vue路由最新的版本是4.x版本。

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

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

安装Vue Router

npm install vue-router

2. 路由的基本使用

App.vue

<template><div><div>app</div><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view></router-view></div>
</template><script></script><style></style>

router/index.js

import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";import Home from '../Views/Home.vue'
import About from '../Views/About.vue'
// 创建一个路由：映射关系
const router = createRouter({// 指定采用的模式  hash// history:createWebHashHistory(),// 使用history模式history:createWebHistory(),routes:[{path:'/',redirect:'/home'},{path:"/home",component:Home},{path:"/about",component:About}]
})export default router

Home.vue

<template><div>home</div>
</template><script>export default {// name:"Home"}
</script><style scoped></style>

About.vue

<template><div>About</div>
</template><script>export default {}
</script><style scoped></style>

3.路由模式 （history和hash）

   // 指定采用的模式  hashhistory:createWebHashHistory(),// 使用history模式history:createWebHistory(),

4. 不记录历史（replace）

<router-link to="/about" replace>关于</router-link>

5. to属性绑定对象

    <router-link :to="{path:'/about'}" replace>关于</router-link>

6. 所在路由样式修改

   .router-link-active{color: red;font-size: 30px;}

设置默认选中class （active-class）

<router-link :to="{path:'/about'}" active-class="link-active">关于</router-link>

7. 路由的懒加载和其他属性

分包处理

const Home = () => import("../Views/Home.vue");
const About = () => import("../Views/About.vue");

分包处理后，不知道那个文件编译打包的，我们可以用魔法注释 （/ webpackChunkName:‘about’ /）
在这里插入图片描述

const Home = () => import(/* webpackChunkName:'home' */"../Views/Home.vue");
const About = () => import(/* webpackChunkName:'about' */"../Views/About.vue");

8.获取参数

在template中获取

{{  $route.params.id }}

在compistion-api中获取

<script setup>import { useRoute,onBeforeRouteUpdate } from 'vue-router';const route = useRoute();console.log(route.params.id)// 获取route跳转id (路由守卫)onBeforeRouteUpdate((to,from)=>{console.log("from:",from.params.id)console.log("to:",to.params.id)})
</script>

在options-api中获取id

this.$route.params.id

9.路由不存在

router/index.js

{path:"/:pathMatch(.*)*",component:()=>import('../Views/Notfound.vue')}

Notfound.vue

<template><div>您的页面没找到{{ $route.params.pathMatch }}</div>
</template><script>export default {}
</script><style scoped></style>

10.编程式路由跳转的使用

<template><!-- 其他元素调整 --><span @click="go_home">首页</span><button @click="go_about">关于	    </button>
</template>
<script setup>import { useRouter } from 'vue-router';const router = useRouter()// 监听元素点击function go_home(){// 调整到首页// router.push('/home')router.push({// name:"home"path:'/home'})}function go_about(){// 调整到关于router.push({path:'/about',query:{name:'why',age:18}})}
</script>

options-api写法

<script>export default{methods:{go_home:function(){// 调整到首页// router.push('/home')this.$router.push({// name:"home"path:'/home'})},go_about:function(){// 调整到关于this.$router.push({path:'/about',query:{name:'why',age:18}})}}}
</script>

页面的前进和后退

<script setup>
import { useRouter } from 'vue-router'const router = useRouter();
function back(){// router.back()//  router.forward()// go(delta)// go(1) -> forward();// go(-1) -> back()router.go(-1)
}
</script>

11. 动态添加路由

动态添加路由
router/index.js

let isAdmin = true
if(isAdmin){// 一级路由router.addRoute({path:"/admin",component:()=>import("../Views/Admin.vue")})// 添加vip页面router.addRoute("home",{path:"vip",component:()=>import('../Views/HomeVip.vue')})
}

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

  • 方式一：添加一个name相同的路由
    在这里插入图片描述

  • 方式二：通过removeRoute方法，传入路由的名称
    在这里插入图片描述

  • 方式三：通过addRoute方法的返回值回调

在这里插入图片描述
路由的其他方法补充

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

12. 路由导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的：
它有两个参数：

  • to：即将进入的路由Route对象；
  • from：即将离开的路由Route对象；

它有返回值：

  • false：取消当前导航
  • 不返回或者undefined：进行默认导航
  • 返回一个路由地址：
    1. 可以是一个string类型的路径
    2. 也可以是一个对象，对象中包含path,query,params等信息
      可选的第三个参数：next（不推荐使用）
    • 在Vue2中我们是通过next函数来决定如何进行跳转的；
    • 但是在Vue3中我们是通过返回值来进行控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

Vue-Router还提供了很多其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：
https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html

我们一起来看一下完整的导航解析流程：

  • 导航的触发
  • 在失活的组件里调用beforeRouteLeave守卫。
  • 调用全局的beforeEach守卫
  • 在重用的组件里调用beforeRouteUpdate守卫
  • 在路由配置里调用beforeEnter
  • 解析一部路由组件
  • 在被激活的beforeResolve守卫
  • 导航被确认
  • 调用全局的afterEach钩子
  • 触发DOM更新
  • 调用beforeRouterEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的传入参数。

感谢大家观看，我们下次再见

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

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

相关文章

VUE（一）

VUE（一）

1.vue简介 英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js 中文官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js 2.Vue的特点 3.初识VUE 在官网下载VUE.js,有两个版本&#xff0c;一个开发一个生产 <!DOCTYPE html> <html lang"en"…
阅读更多...
Java拼图

Java拼图

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 创建一个代码类 和一个运行类 代码如下&#xff1a; package heima;import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import jav…
阅读更多...
被锁总时间

被锁总时间

题目描述&#xff1a; 对一个事务进行加锁与解锁&#xff0c;其中有加锁数组&#xff0c;解锁数组&#xff0c;这两个数组长度相等&#xff0c;且数组内数据代表加锁与解锁的具体时间点&#xff0c;求给出数组中事务的总被锁时间。&#xff08;其中加锁后默认在60秒后解锁&…
阅读更多...
物联网AI MicroPython学习之语法 TIMER硬件定时器

物联网AI MicroPython学习之语法 TIMER硬件定时器

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; TIMER 介绍 模块功能: 硬件定时器模块 接口说明 Timer - 构建Timer对象 函数原型&#xff1a;Timer(id)参数说明&#xff1a; 参数类型必选参数&#xff1f;说明idintY硬件定时器外设模块id&#xff1a…
阅读更多...
QT下使用QChart绘制曲线

QT下使用QChart绘制曲线

目录 头文件内容构造函数AddSeries方法UpdateSeries方法AppendSeriesData方法SetLegendVisiableSetRubberBandCPP内容测试函数 需要用到的头文件&#xff1a; #include <QtCharts/QChart> #include <QtCharts/QChartView> #include <QtCharts/QValueAxis> #…
阅读更多...
YARN，ZOOKEERPER--学习笔记

YARN，ZOOKEERPER--学习笔记

1&#xff0c;YARN组件 1.1YARN简介 YARN表示分布式资源调度&#xff0c;简单地说&#xff0c;就是&#xff1a;以分布式技术完成资源的合理分配&#xff0c;让MapReduce能高效完成计算任务。 YARN是Hadoop核心组件之一&#xff0c;用于提供分布式资源调度服务。 而在Hadoop …
阅读更多...
拼图小游戏

拼图小游戏

运行出的游戏界面如下&#xff1a; User类 package domain;/*** ClassName: User* Author: Kox* Data: 2023/2/2* Sketch:*/ public class User {private String username;private String password;public User() {}public User(String username, String password) {this.user…
阅读更多...
Linux：安装软件的两种方式rpm和yum

Linux：安装软件的两种方式rpm和yum

一、rpm方式 1、简单介绍 RPM是RedHat Package Manager的缩写&#xff0c;它是Linux上打包和安装的工具。通过rpm打包的文件扩展名是.RPM。这个安装包就类似Windows系统中的.exe文件。rpm工具实现Linux上软件的离线安装。 2、软件相关信息的查询命令 查询Linux系统上所有已…
阅读更多...
Ubuntu中apt-get update显示域名解析失败

Ubuntu中apt-get update显示域名解析失败

第一步 检查主机->虚拟机能否ping成功 ping 红色框中的IPv4地址 能通&#xff0c;表示虚拟机ip配置成功;否则&#xff0c;需要先配置虚拟机ip 第二步 检查是否能ping成功百度网址 ping www.baidu.com 若不成功&#xff0c;可能原因 虚拟机没联网&#xff0c;打开火狐浏览器…
阅读更多...
公司内部网络架设悟空CRM客户管理系统 cpolar无需公网IP实现内网,映射端口外网访问

公司内部网络架设悟空CRM客户管理系统 cpolar无需公网IP实现内网,映射端口外网访问

1、什么是内网穿透&#xff1f; 内网穿透&#xff0c;即内网映射&#xff0c;内网IP端口映射到外网的过程。是一种主动的操作&#xff0c;需要本人一些内网的权限。比如在公司自己电脑&#xff0c;将办公OA发布到互联网&#xff0c;然后提供外网在家或出差在外连接访问。 可以…
阅读更多...
文件重命名最佳实践：如何确保文件名的准确性和一致性

文件重命名最佳实践：如何确保文件名的准确性和一致性

在日常生活和工作中&#xff0c;经常需要处理大量的文件&#xff0c;包括电子文件和纸质文件。文件重命名是为了更好地组织和管理这些文件&#xff0c;以方便查找和使用。然而&#xff0c;重命名文件并不是一件简单的事情&#xff0c;它需要遵循一定的最佳实践以确保文件名的准…
阅读更多...
【信息安全】浅谈三种XSS(跨站脚本攻击)的攻击流程与防御措施

【信息安全】浅谈三种XSS(跨站脚本攻击)的攻击流程与防御措施

银狼美图镇楼 XSS 跨站脚本攻击&#xff08;Cross-Site Scripting&#xff0c;简称XSS&#xff09;是一种常见的Web安全漏洞&#xff0c;攻击者通过在Web应用中注入恶意脚本&#xff0c;使得浏览器在解析页面时执行该脚本&#xff0c;从而实现攻击目的。 类型 存储型XSS&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023