【vue3 路由使用与讲解】vue-router : 简洁直观的全面介绍

# 核心内容介绍

  • 路由跳转有两种方式:

    • 声明式导航:<router-link :to="...">
    • 编程式导航:router.push(...) 或 router.replace(...) ;两者的规则完全一致。
      • push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
        replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>;

    • 由于属性 to 与 router.push 接受的对象种类相同,所以两者的规则完全相同。
  • 路由传参有两种方法:

    • params:使用动态路由的方式进行传参;
      • 只为了传参则不建议用params,params 主要是用来进行动态路由匹配的。
      • 声明为动态路由,params则是必传的!除非设置为可选!
      • 声明路由时设置该路由props参数为true,则会改变功能形态。(傻逼功能,别用)
    • query:拼接在url后面,以?的方式隔开;/urlpath?d1="666"&d2=逆天&arr=["1"]&b=true
      • 传参时仅建议 string | number | (string|number)[] 类型的数据 ,否则编辑器会 ts 报错提示。
    • 所有传参的数据类型如果非字符串会自动字符串化 >> String(xx)
    • params 和 query 的 TS 类型为:string | string[]。也就意味着它并不希望你放乱七八糟的东西在url上,即便你JSON.stringify() 转换过了。
  • 动态路由:

    • 动态路由的跳转必须是 name + params,用 path 跳转命名路由将无效;且 params 必传!
    • 动态路由以 `/path1/:id` 的方式进行声明,跳转路径结果为 /path/1
    • 动态路由设置的参数例如 :id ,可以将该参数设置为可选参数 `/path1/:id?` ,这样params就是可传可不传了。
  • 命名路由:

    • 就是声明了路由的 name。name值是唯一的,不管是顶级路由还是嵌套路由。
    • 如果是跳转嵌套路由里的子路由,path 跳转需要/xx/xx/child,可直接用该子路由的name。
    • 没有硬编码的 URL
    • params 的自动编码/解码。
    • 防止你在 url 中出现打字错误。
    • 绕过路径排序(如显示一个)

# 说明:

        $route / route:    有当前路由的所有信息!
        $router / router:  用来进行路由操作的! 


 # 声明路由

  • 如何声明路由

    • 必备的 path  component。其他一堆属性自己了解相关功能就知道什么时候是必要的,什么时候是非必要的了。有用点的就是name  redirect  children  meta了。
  • 顶级路由

    • 最外层的路由
  • 嵌套路由

    • 声明路由的 children 
    • 嵌套路由不限层级
    • 想要默认加载一个子路由的话将path设置为空字符串:` path:"" `。
    • 跳转嵌套路由最好使用 name 方式跳转,降低心智负担!
  • 声明为动态路由,上面讲过了,忘了?别怕,那下面代码也有示例。

  • 路由重定向

    • redirect: { name: 'routeName' }, 设置为路由的name最保险,别想着其他花里胡哨的。

    • 在写 redirect 的时候,如果不是嵌套路由,可以省略 component 配置。
      你重定向到自己的子路由,那肯定要有 component  啊,不然你 router-view 在哪(笑)

  • 命名视图

    • component 变 components,具体看代码

  • 本示例包含 path , name ,  meta , component , components , children ,  redirect , props , 路由懒加载 , alias 。

import { createRouter, createWebHistory } from 'vue-router'export const router = createRouter({history: createWebHistory(), // 设置路由模式routes: [{// 普通的设置一个普通的路由(顶级路由)path: '/',name: 'HelloWorld',meta: { requiresXXX: true }, // 设置路由元信息,应用场景的话:主要就路由守卫里用的会多一点。该数据只能在这里声明,其他途径无法修改。component: () => import('../components/HelloWorld.vue') // 设置路由懒加载},{path: '/routerVue/:id', // 设置为动态路由,id则必传// path: '/routerVue/:id?', // 设置该动态路由的 id 为可选参数,变为非必传name: 'routerVue',component: () => import('@/components/xxx.vue')},{path: '/demo',alias: '/hellow', // 你访问 /hellow,页面url路径会保持为/hellow,但是路由匹配则为/demo,显示 yyyyyy.vue 组件内容component: () => import('@/components/yyyyyy.vue')},{path: '/edit:id?',name: 'edit',// redirect: { name: 'profile' }, // 路由重定向,访问 /edit 直接重定向为 /edit/profilecomponent: () => import('../components/edit.vue'),props: true, // 设置为true 则在路由组件中,动态路由的参数 会直接放在vue的 props 里。 // 完全不推荐的写法,增加心智负担。children: [ // 设置为嵌套路由{// 当 /edit 匹配成功// demo2.vue 将被渲染到 edit 的 <router-view> 内部path: '', // 路径为'',需要增加name,不然会抛出警告。component: () => import('../components/demo2.vue'),// 命名视图功能: component 变为 components ,然后设置对应视图组件的名称// components:{ // 注意加 s 。。。//   default: () => import('../components/router-test1.vue'),//   template1: () => import('../components/router-test2.vue'),// },// props: {default: true , template1: false} // 可以为每个命名视图定义 props 配置。还可设置为函数模式(超不推荐,提高代码维护理解难度,对功能方面没任何提升)},{// 当 /edit/profile 匹配成功// demo.vue 将被渲染到 edit 的 <router-view> 内部path: 'profile',name: 'profile',component: () => import('../components/profile.vue'),}]},{// 匹配所有路径,当上述路径都不满足时,跳转到404页面// 如果项目是有动态添加路由的,注意一定要把该404路由提取出来,等动态添加完路由,再把404添加到动态路由的最后一个。path: '*',name: '404',component: () => import('../components/404.vue'),},],
})


 # 路由跳转的多种写法:

声明式导航写法:

<router-link :to="{ name: 'vue33', params: { id: 110 }, query: { d1: 'wuwu~~~' } }">vue3.3/3.4新特性</router-link>

编程式导航写法:(options api里的方式)

this.$router.push({name: 'vue33',params: {id: 110},query: {data: 666}
})

编程式导航写法:(composition api里的方式)

import { useRouter  } from 'vue-router'
let router = useRouter()
function tiaozhuan() {router.push({name: 'vue33',params: {id: 110},query: {data: 666}})
}

replace 是当前页面替换新页面,路由历史记录里不会保存当前页。

import { useRouter  } from 'vue-router'
let router = useRouter()
function tiaozhuan() {router.replace({name: 'vue33',params: {id: 110},query: {data: 666}})
}

如果是嵌套路由则是父路由path + 子路由path,或者子路由的name,并且跳转时,如果父路由是命名路由,则params也会是必传!


# 获取路由参数

跳转目标路由,声明了params或query之后,(选项式api写法) 通过this.$route.params 或 this.$route.query 即可拿到对应的路由参数;

组合式API写法如下:


import { useRoute } from 'vue-router'let route = useRoute()console.log(route.params);
console.log(route.query);
console.log(route.meta);

# 重新提醒:

route:  有当前路由的所有信息
router: 用来进行路由操作的! 


# 路由的导航守卫

  • 全局守卫;
    • beforeEach :全局前置守卫  (1)
    • beforeResolve :全局解析守卫  (3)
    • afterEach:全局后置钩子,该钩子在已经进入该路由后触发,所以无需return true 或 next()。  (4)
  • 路由独享的守卫:
    • beforeEnter :在所有组件内守卫和异步路由组件被解析之后调用。(2)
  • 组件守卫:有3个,其中2个没屁用。

    • beforeRouteEnter :能处理的 beforeEnter 都可以。

    • beforeRouteUpdate :更没必要,直接 watch route.params 即可。

    • beforeRouteLeave :有点用,如果用户跳转路由时,当前页面编辑内容未保存,则可以 return false 取消路由跳转。(setup 内则手动引入 onBeforeRouteLeave)

  • 触发顺序(1)(2)(3)(4)。

    • 组件守卫其中2个懒得算,如果算上 beforeRouteLeave 那 beforeRouteLeave 排在beforeEach 前面。

每个守卫方法接收两个参数:

  • to:      即将要进入的目标 。
  • from:  当前导航正要离开的路由 。
  • next:  可选的第三个参数 。(现在根据return 结果来决定了,且更安全(确保调用一次),所以基本不需要next了)
import { createRouter } from 'vue-router'
const router = createRouter({ ... })router.beforeEach((to, from) => {// ...return false  // 返回 false 以取消导航// 如果什么都没有,undefined 或返回 true,则导航是有效的,并调用下一个导航守卫// return { name: 'Login' } // 将用户重定向到登录页面
})

# 动态添加路由

应用场景示例:页面菜单和所拥有的路由是根据用户角色动态生成的,此时就需要配合addRoute功能来实现需求。

//! 动态添加路由、删除路由、添加嵌套路由
router.addRoute({ path: '/about', component: xxx })// 当路由被删除时,所有的别名和子路由也会被同时删除
// 会返回一个回调,调用该函数即可删除路由 (这种方式可以保证删的更准点吧。。。)
const removeRoute = router.addRoute({ path: '/about', component: xxx })
removeRoute()
// router.removeRoute('about') 通过路由名称进行删除,路由表有同名的话需要注意点(建议路由表name都是唯一的!)// 添加嵌套路由
// router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// router.addRoute('admin', { path: 'settings', component: AdminSettings })
//> 上述代码等同如如下:
// router.addRoute({
//   name: 'admin',
//   path: '/admin',
//   component: Admin,
//   children: [{ path: 'settings', component: AdminSettings }],
// })

# 查看现有路由​

Vue Router 提供了两个功能来查看现有的路由:

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


# 路由缓存、过渡

<router-view>、<keep-alive> 和 <transition>​
transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用:

<router-view v-slot="{ Component }"><transition><keep-alive><component :is="Component" /></keep-alive></transition>
</router-view>

# 路由模式

  • Hash 模式:createWebHashHistory
  • HTML5 模式:createWebHistory
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({history: createWebHashHistory(),routes: [//...],
})

html5模式需要在服务器上设置初次访问如果404时,进行路由回退:

nginx 如下:

location / {try_files $uri $uri/ /index.html;
}

其他的详见官网;

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

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

相关文章

JVM内部世界(内存划分,类加载,垃圾回收)

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;JVM内部世界(内存划分,类加载,垃圾回收) 关于JVM的学习主要掌握三方面: JVM内存区的划分类加载垃圾回收 一.JVM内存区的划分 当一个Java进程开始执行时,JVM会首先向操作系统申…

实例驱动计算机网络

文章目录 计算机网络的层次结构应用层DNSHTTP协议HTTP请求响应过程 运输层TCP协议TCP协议面向连接实现TCP的三次握手连接TCP的四次挥手断开连接 TCP协议可靠性实现TCP的流量控制TCP的拥塞控制TCP的重传机制 UDP协议 网际层IP协议&#xff08;主机与主机&#xff09;IP地址的分类…

php 读取文件并以文件方式下载

if (!file_exists($filename)){//判断能否获取这个文件header("Content-type: text/html; charset=utf-8");echo "File not found!";exit

【创作回顾】17个月峥嵘创作史

#里程碑专区#、#创作者纪念日# 还记得 2022 年 10 月 05 日&#xff0c;我在CSDN撰写了第 1 篇博客——《关于测试工程师瓶颈和突围的一个思考》&#xff0c;也是我在全网发布的第一篇技术文章。 回想当时&#xff0c;这一篇的诞生过程并不轻松&#xff0c;不像是一篇网络文章…

【计算机网络】深度学习HTTPS协议

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;【计算机网络】深度学习HTTPS协议 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 一:HTTPS是什么二:HTTPS的工作过程三:对称加密四:非对称加密五:中间人攻击1…

【web | CTF】BUUCTF [HCTF 2018]WarmUp

天命&#xff1a;这题本地php代码是无法复现的 首先打开网站&#xff0c;啥也没有&#xff0c;查看源码 发现文件&#xff0c;打开访问一下看看&#xff0c;发现是代码审计 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whit…

【学习总结】什么是DoS和DDoS

[Q&A] 什么是DoS DoS 是 “Denial of Service”&#xff08;拒绝服务&#xff09;的缩写&#xff0c;它是一种网络攻击方式&#xff0c;其目的是使目标计算机或网络资源无法为合法用户提供正常的服务。通过向目标系统发送大量请求、消耗其带宽、处理器或内存等资源&#…

13 双口 RAM IP 核

双口 RAM IP 核简介 双口 RAM IP 核有两个端口&#xff0c;它又分为伪双端口 RAM 和真双端口 RAM&#xff0c;伪双端口 RAM 一个端口只能读&#xff0c;另一个端口只能 写&#xff0c;真双端口 RAM 两个端口都可以进行读写操作。同时对存储器进行读写操作时就会用到双端口 RAM…

unity-1

创建游戏对象&#xff08;游戏物体&#xff09; 可通过unity中的菜单栏中的Gameobject创建&#xff1b;也可在Hierarchy&#xff08;层级&#xff09;中创建&#xff0c; 双击即可居中看到。 在Hierarchy空白处右键即可看到&#xff0c;能创建游戏对象。 在Scene框中&#x…

BioTech - ADMET的性质预测 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/136438192 ADMET&#xff0c;即 Absorption、Distribution、Metabolism、Excretion、Toxicity&#xff0c;吸收、分布、代谢、排泄、毒性…

题目 1629: 蓝桥杯算法训练VIP-接水问题

题目描述: 学校里有一个水房&#xff0c;水房里一共装有m个龙头可供同学们打开水&#xff0c;每个龙头每秒钟的供水量相等&#xff0c;均为1。现在有n名同学准备接水&#xff0c;他们的初始接水顺序已经确定。将这些同学按接水顺序从1到n编号&#xff0c;i号同学的接水量为wi。…

Linux shell:补充命令的使用

目录 一.导读 二.正文 三.结语 一.导读 上一篇介绍了脚本的简单概念以及使用&#xff0c;现在补充一些命令。 二.正文 目前处于全局目录&#xff0c;通过mkdir创建名我为day01的文件。 通过cd命令day01 切换至day01文件当中。 使用vim文本编辑器文件名&#xff08;firstdir&…

设计模式学习笔记——工厂方法模式

设计模式&#xff08;创建型&#xff09;—— 工厂方法模式 传统的获取对象方法&#xff0c;是通过 new 关键字获取一个对象&#xff0c;但是如果多个地方都需要该对象&#xff0c;就需要 new 很多次&#xff0c;这时候如果这个类发生了一些改变&#xff0c;如类名变了&#x…

静态上下文调用了非静态上下文

问题描述&#xff1a; static修饰的方法不能调用非static修饰方法 问题原因&#xff1a; 在Java中&#xff0c;静态方法&#xff08;如main方法&#xff09;可以直接访问静态成员&#xff08;包括静态变量和静态方法&#xff09;&#xff0c;但不能直接访问非静态成员&#…

【Python】进阶学习:pandas--query()用法详解

&#x1f4da;【Python】进阶学习&#xff1a;pandas–query()用法详解 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

剑指offer面试题24 二叉树搜索树的后续遍历序列

考察点 二叉搜索树&#xff0c;树的后序遍历知识点 题目 分析 本题目要求判断某序列是否是二叉搜索树的后序遍历序列&#xff0c;后序遍历的特点是左右根&#xff0c;因此序列的最后一个元素肯定是根结点&#xff0c;而前面的序列可以分为俩部分&#xff0c;第一部分是左子树…

LeetCode --- 无重复字符的最长子串

题目描述 无重复字符的最长子串 找到无重复的最长连续字符串。 示例1中 abc | bca | cab 都符合题意。输出3即可。 代码 可以使用暴力枚举 哈希表&#xff0c;哈希表来判断是否重复&#xff0c;枚举来判断每一种情况&#xff0c;需要开两层for循环&#xff0c;时间复杂度n…

linux高级编程:线程(二)、进程间的通信方式

线程&#xff1a; 回顾线程&#xff08;一&#xff09;&#xff1a; 1.线程间通信问题 线程间共享同一个资源&#xff08;临界资源&#xff09; 互斥&#xff1a; 排他性访问 linux系统 -- 提供了Posix标准的函数库 -- 互斥量&#xff08;互斥锁&#xff09; 原子操作&#x…

精通Matplotlib:从入门到精通的绘图指南

在本篇文章中&#xff0c;我们将深入探索Matplotlib库&#xff0c;这是一个强大的Python绘图库&#xff0c;广泛用于数据可视化。Matplotlib让我们能够以简单而直观的方式创建各种静态、动态和交互式的图表。无论你是数据分析师、科研人员&#xff0c;还是任何需要数据可视化的…

用Redis如何实现延迟队列?

在Redis中实现延迟队列可以利用有序集合&#xff08;Sorted Set&#xff09;和定时任务的方式。下面是一个基本的实现思路&#xff1a; 添加延迟任务&#xff1a; 将任务信息作为一个字符串存储在Redis中&#xff0c;同时将其对应的执行时间作为分数(score)存储在有序集合中。使…