【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' } // 将用户重定向到登录页面
})

# 动态添加路由

//! 动态添加路由、删除路由、添加嵌套路由
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/713187.shtml

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

相关文章

Secure Boot(安全启动)

Secure Boot&#xff08;安全启动&#xff09;的原理基于链式验证&#xff0c;这是一种确保计算机在启动过程中只加载和执行经过认证的软件的机制。这个过程涉及到硬件、固件和操作系统的多个层面。以下是Secure Boot的基本原理&#xff1a; 密钥和证书&#xff1a;Secure Boot…

day07_分类管理EasyExcel品牌管理

文章目录 1 分类管理1.1 菜单添加1.2 表结构介绍1.3 页面制作1.4 列表查询1.4.1 需求分析1.4.2 后端接口CategoryCategoryControllerCategoryServiceCategoryMapperCategoryMapper.xml 1.4.3 前端对接category.jscategory.vue 2 EasyExcel2.1 数据导入导出意义2.2 EasyExcel简介…

ABAP - SALV教程 01- 开篇:打开SALV的三种方式之一

关于SALV&#xff0c;这里参考巨佬江正军的文章讲解&#xff0c;在做SAP开发的遇到困难和瓶颈的时候&#xff0c;每每读到巨佬的文章都会灵感爆发、醍醐灌顶。https://www.cnblogs.com/jiangzhengjun/p/4291387.html 博主由于是由JAVA转型的ABAP开发&#xff0c;刚接触ABAP的时…

力扣细节题:判断是否为平衡二叉树

经典题&#xff0c;需要记忆&#xff0c;且注意fabs和fmax函数的使用 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/int deep(struct TreeNode*root){if(rootNULL){return 0;}r…

Unity3D 渲染队列 ZTest与ZWrite详解

前言 在Unity3D中&#xff0c;渲染队列&#xff08;Rendering Queue&#xff09;是一个非常重要的概念&#xff0c;它决定了游戏中各个物体的渲染顺序和优先级。而在渲染队列中&#xff0c;ZTest和ZWrite又是两个关键的参数&#xff0c;它们决定了物体在渲染的过程中如何处理深…

研发效能最佳实践:持续集成应用实践丨IDCF

作者&#xff1a;谢带达 研发效能&#xff08;DevOps&#xff09;工程师&#xff08;中级&#xff09;认证学员 一、DevOps概述 DevOps的发展可以追溯到2009年&#xff0c;当时由Patrick Debois和Andrew Clay Shafer发起了第一次DevOps Days会议。随后&#xff0c;DevOps开始…

【R语言简介】讲解

R语言简介&#xff0c;环境与基础语法及注释 1. R语言简介2. 环境安装3. 基础语法3.1 变量赋值3.2 数据结构3.3 函数调用3.4 控制流3.5 注释 4. 基本的数据操作和函数 1. R语言简介 R语言是一种专为统计分析、数据挖掘和图形展示而设计的编程语言和软件环境&#xff0c;它由统…

应用引导页配置相关 - iOS

应用引导页配置相关,通过 ScrollView 滑动至末页点击进入主页,具体实现方式如下,可供参考; /**加载引导页*/ - (void)loadGuidePage {// 基础配置self.window [[UIWindow alloc] initWithFrame:SCREEN_RECT];self.window.backgroundColor [UIColor whiteColor];viewControll…

永磁同步电机无感FOC(龙伯格观测器)算法技术总结-实战篇

文章目录 1、ST龙伯格算法分析&#xff08;定点数&#xff09;1.1 符号说明1.2 最大感应电动势计算1.3 系数计算1.4 龙伯格观测器计算1.5 锁相环计算1.6 观测器增益计算1.7 锁相环PI计算&#xff08;ST&#xff09;1.8 平均速度的用意 2、启动策略2.1 V/F压频比控制2.2 I/F压频…

qnx shell sh ,linux shell bash

for i in 1 2 3 4 5 doecho $i doneecho $SHELL Shell脚本的常用执行方式、bash 和 sh 的关系、子shell、Centos 默认的解析器是 bash、Linux 提供的 Shell 解析器、Shell 概述、Shell 脚本入门_centos sh bash-CSDN博客

php cli 多进程编程

前言 php cli 命令模式我想在日常开发中&#xff0c;大家用的都比较少。其实&#xff0c;在某些场景&#xff0c;cli命令真的很有作用&#xff0c; 我举个例子 在mysql数据库的某个表tab1中数据量有3000W条数据&#xff0c;现在需要对这张表中的每一条数据做计算处理。将处理…

设计模式(含7大原则)面试题

目录 主要参考文章 设计模式的目的 设计模式的七大原则 设计模式的三大分类及关键点 1、创建型模式(用于解耦对象的实例化过程) 2、结构型模式 3、行为型模式 23种设计模式(乱序--现学现写,不全面--应付面试为主) 单例模式 模板模式 哈哈哈哈哈 声明 此文只针…

策略模式代码示例(二)

一、定义 策略模式&#xff0c;针对每一个不同的类型&#xff0c;调用具有共同接口的不同实现类&#xff0c;从而使得它们可以相互替换。 策略模式 &#xff0c;针对实现同一接口的不同的类&#xff0c;采用不同的策略。比如&#xff0c;面对高级会员、初级会员会采用不同的折…

详解字符串函数<string.h>(下)

1. strncpy函数的使用和模拟实现 char* strncpy(char* destination, const char* source, size_t num) 1.1 函数功能以及用法 拷贝指定长度的字符串 将“source”指向的字符串中的“num”个字符拷贝到“destination”指向的字符数组中。相比于strcpy函数&#xff0c;该函数多…

SQL语言的五大分类 (DQL、DDL、DML、DCL、TCL)

目录 一、DQL 二、DDL 三、DML 四、DCL 五、TCL 一、DQL&#xff08;数据查询语言&#xff09; Data Query Language&#xff0c;数据查询语言&#xff1a; select&#xff1a;用于数据查询 关键字&#xff1a;SELECT ... FROM ... WHERE 二、DDL&#xff08;数据定义语…

swift 长按桌面图标弹出快捷选项

文章目录 一、3D Touch二、主屏交互1. 静态添加2. 动态添加三、监听主屏交互按钮的点击事件四、预览和跳转1. 注册3D touch2. 实现协议3. 在目标控制器复写previewActionItems4. 使用UIContextMenuConfiguration一、3D Touch 3D Touch通过屏幕下方的压力感应器来感知不同的压力…

Cesium地表透明

之前Cesium是不能地表透明的&#xff0c;需要改内部代码&#xff0c;将GlobeSurfaceTileProvider.js中的PASS.GLOBE改成PASS.TRANSPARENT&#xff0c;通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法&#xff08;其实2020年就有该方法了&#xff09;&#xf…

数据库管理-第157期 Oracle Vector DB AI-08(20240301)

数据库管理157期 2024-03-01 数据库管理-第157期 Oracle Vector DB & AI-08&#xff08;20240301&#xff09;1 创建示例向量2 查找最近向量3 基于向量簇组的最近向量查询总结 数据库管理-第157期 Oracle Vector DB & AI-08&#xff08;20240301&#xff09; 作者&…

【axiox】前后端接口通讯数据交互

重要全局配置&#xff1a; axios.create(); 设置axios请求的公共配置信息。 service.interceptors.request.use((config)>{}) 请求拦截器 service.interceptors.response.use((res)>{},(err)>{}) 响应拦截器 const source axios.CancelToken.source(); 用…

oracle RAC节点重构

一、清除集群上二节点的节点信息 1、删除实例 dbca或静默&#xff1a; [oraclerac1 ~]$ dbca -silent -deleteinstance -nodelist rac2 -gdbname orcl -instancename orcl2 -sysdbausername sys -sysdbapassword oracledbca-实例管理-删除节实例-选择服务输入密码-选择inactiv…