Vue3-路由详解

在这里插入图片描述

文章目录

  • 路由
    • 对路由的理解
    • 安装 Vue Router
    • 基本切换效果
    • 两个注意点
    • 路由器工作模式
    • to的两种写法
    • 命名路由
    • 嵌套路由
    • 路由传参
      • query参数
      • params参数
    • 路由的props配置
    • replace属性
    • 编程式导航
    • 重定向

更多相关内容可查看

路由

附git地址:https://gitee.com/its-a-little-bad/vue.git
git中有以下相关代码,可以拉取测试,node版本为20.8.1,详解看注释

对路由的理解

  • 动态路由匹配:你可以基于 URL 的不同部分来动态地匹配和渲染不同的组件。
  • 嵌套路由:你可以将路由映射到嵌套的组件结构中,以构建复杂的用户界面。
  • 路由参数:你可以在 URL 中添加参数,并在组件中访问它们。
  • 查询参数和哈希片段:除了路径参数外,你还可以从 URL 的查询字符串或哈希片段中访问数据。
  • 滚动行为:你可以自定义路由切换时的滚动行为。
  • 导航守卫:你可以在路由切换前、切换后或切换失败时运行一些逻辑,如检查用户是否已登录或加载异步数据。
  • 路由懒加载:Vue Router 支持将路由组件异步加载,以提高应用的初始加载速度。
  • 编程式导航:除了使用 组件进行声明式导航外,你还可以使用 Vue Router 的 API 进行编程式导航。
  • HTML5 History 模式:默认情况下,Vue Router 使用 HTML5 History 模式来构建
    URL,但它也支持传统的哈希模式(使用 URL 的哈希片段)。
  • 过渡效果:你可以使用 Vue 的过渡组件()为路由切换添加过渡效果。

安装 Vue Router

npm install vue-router
# 或者  
yarn add vue-router

基本切换效果

  • Vue3中要使用vue-router的最新版本,目前是4版本。
  • 路由配置文件代码如下:
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),//工作模式 ,还有一种是hashroutes:[{path:'/home', //pages下的vue文件的路径component:Home //pages下的vue文件},{path:'/about',component:About}]
})
export default router //向外抛出
  • main.tsmain.js代码如下:
import router from './router/index'
app.use(router)//使用路由
app.mount('#app')//挂载
  • App.vue代码如下
<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router'  
</script>

两个注意点

  1. 路由组件通常存放在pagesviews文件夹,一般组件通常存放在components文件夹。
  2. 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载

路由器工作模式

  1. history模式

优点:URL更加美观,不带有#,更接近传统的网站URL

缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。

const router = createRouter({history:createWebHistory(), //history模式/******/
})
  1. hash模式

优点:兼容性更好,因为不需要服务器端处理路径。

缺点:URL带有#不太美观,且在SEO优化方面相对较差。

const router = createRouter({history:createWebHashHistory(), //hash模式/******/
})

to的两种写法

<!-- 第一种:to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link><!-- 第二种:to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

命名路由

作用:可以简化路由跳转及传参。

给路由规则命名:

routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}
]

跳转路由:

<!--简化前:需要写完整的路径(to的字符串写法) -->
<router-link to="/news/detail">跳转</router-link><!--简化后:直接通过名字跳转(to的对象写法配合name属性) -->
<router-link :to="{name:'guanyu'}">跳转</router-link>

嵌套路由

  1. 编写News的子路由:Detail.vue
  2. 配置路由规则,使用children配置项:
const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}]
})
export default router
  1. 跳转路由(记得要加完整路径):
<router-link to="/news/detail">xxxx</router-link>
<!---->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>
  1. 记得去Home组件中预留一个<router-view>
<template><div class="news"><nav class="news-list"><RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">{{news.name}}</RouterLink></nav><div class="news-detail"><RouterView/></div></div>
</template>

路由传参

query参数

  1. 传递参数
<!-- 跳转并携带query参数(to的字符串写法) -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">跳转
</router-link><!-- 跳转并携带query参数(to的对象写法) -->
<RouterLink :to="{//name:'xiang', //用name也可以跳转path:'/news/detail',query:{id:news.id,title:news.title,content:news.content}}"
>{{news.title}}
</RouterLink>
  1. 接收参数:
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

  1. 传递参数
<!-- 跳转并携带params参数(to的字符串写法) -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink><!-- 跳转并携带params参数(to的对象写法) -->
<RouterLink :to="{name:'xiang', //用name跳转params:{id:news.id,title:news.title,content:news.title}}"
>{{news.title}}
</RouterLink>
  1. 接收参数:
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1:传递params参数时,若使用to的对象写法,必须使用name配置项,不能用path

备注2:传递params参数时,需要提前在规则中占位。

路由的props配置

作用:让路由组件更方便的收到参数(可以将路由参数作为props传给组件)

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的对象写法,作用:把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的布尔值写法,作用:把收到了每一组params参数,作为props传给Detail组件// props:true// props的函数写法,作用:把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}

replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式。
  2. 浏览器的历史记录有两种写入方式:分别为pushreplace
  • push是追加历史记录(默认值)。
  • replace是替换当前记录。
  1. 开启replace模式:
<RouterLink replace .......>News</RouterLink>

编程式导航

路由组件的两个重要的属性:$route$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

重定向

  1. 作用:将特定的路径,重新定向到已有路由。
  2. 具体编码:
{path:'/',redirect:'/about'
}

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

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

相关文章

项目纪实 | 版本升级操作get!GreatDB分布式升级过程详解

某客户项目现场&#xff0c;因其业务系统要用到数据库新版本中的功能特性&#xff0c;因此考虑升级现有数据库版本。在升级之前&#xff0c;万里数据库项目团队帮助客户在本地测试环境构造了相同的基础版本&#xff0c;导入部分生产数据&#xff0c;尽量复刻生产环境进行升级&a…

电脑缺少运行库,无法启动程序

在我们使用一些软件的时候&#xff0c;由于电脑缺少一些运行库&#xff0c;导致无法启动应用软件&#xff0c;此时需要我们安装缺少的运行库。 比如当电脑提示&#xff1a; Cannot load library Qt5Xlsx.dll 我们就需要下载C得运行库&#xff0c;以满足软件运行需要。 下载链…

某三甲医院智能化系统建设项目施工组织设计(516页)

第十四节、ICU重症监护探视系统设计方案 1、系统总体概述 某市市第一人民医院为一个集医疗、研究、医学教学为一体现代化医院建筑群&#xff0c;不仅在医学界的学术地位和声誉&#xff0c;还应拥有赋予人性的医疗环境&#xff0c;为病人创造最舒适的医疗条件。 探视系统帮助…

如何查看谁连接到了你的Wi-Fi网络?这里提供几种方法或工具

序言 你知道谁连接到你路由器的Wi-Fi网络吗?查看从路由器或计算机连接到Wi-Fi网络的设备列表,找出答案。 请记住,现在很多设备都可以连接到了你的Wi-Fi,该名单包括笔记本电脑、智能手机、平板电脑、智能电视、机顶盒、游戏机、Wi-Fi打印机等。 使用GlassWire Pro查看连接…

chatMed开发日志博客(持续更新中)

目录 1. 项目概述 2. 开发人员团队 3. 大致需求 4. 开发内容 4.1. 前端开发 4.1.1: 前端页面开发 4.1.2: 登录机制以及路由守卫的开发 4.1.3: 文件上传机制和保存机制 4.1.4: 消息传递机制 4.2. 线程池开发 4.3. 在线调试 1. 项目概述 搭建一个基于深度学习的分析平台…

SpringBoot 七牛云 OSS 私有模式 获取访问链接

目录 一、问题引出 二、在SpringBoot中获取私有访问路径的操作 一、问题引出 由于七牛云OSS的公有模式存在被盗刷的风险&#xff0c;可能导致服务器额外的费用&#xff0c;于是我选择私有模式进行操作。私有模式的访问路径是一个问题&#xff0c;因为需要对应着token和e这两…

Linux系统监控

文章目录 一、系统监控基本介绍二、内存监控2.1、内存监控字段解析2.2、windows下查看内存2.2.1、通过cmd中命令查看内存条信息&#xff1a;2.2.2、通过cmd中命令查看物理内存信息&#xff1a;2.2.3、使用任务管理器查看内存2.2.4、使用资源监视器查看内存2.2.5、使用系统信息工…

【Springboot】——项目的创建与请求参数应用

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…

element-plus中在表格校验输入的值

element-plus中在表格校验输入的值 效果&#xff1a; 注意事项&#xff1a;需要在表单套一个表格的字段 代码&#xff1a; <el-form :model"tableFrom" ref"tableDataRef" :rules"rules" style"margin: 0px !important;">&…

vue中大屏可视化适配所有屏幕大小

1. 外部盒子 .screenBox {width: 100vw;height: 100vh;background: url("/assets/images/bg.png") no-repeat;background-size: cover; }2.比例盒子 外层盒子css定义 .boxScale {width: 1920px;height: 1080px;background-color: orange;transform-origin: left top;…

5.29工效学-人因工程人机交互

对于工效学这门课&#xff0c;一直都感觉很有意思&#xff0c;是一个值得再认真一点的课。可惜上课的时候效率不高&#xff0c;有感兴趣的东西课后也没有自行去拓展开来&#xff0c;前面的课我感觉还讲了比较重要的东西&#xff0c;但是&#xff0c;全忘了呢&#xff08;真的对…

Mac OS 用户开启 80 端口

开启端口 sudo vim /etc/pf.conf # 开放对应端口 pass out proto tcp from any to any port 8080 # 刷新配置文件 sudo pfctl -f /etc/pf.conf sudo pfctl -e获取本机ip地址 ifconfig en0 | grep inet | grep -v inet6 | awk {print $2}访问指定端口

C语言:深入了解(联合体和枚举)

目录 联合体 联合体的类型的声明 联合体的特点 相同成员的结构体和联合体对比 联合体大小的计算 联合体的使用举例 联合体的类型&#xff1a;判断联合体是大端还是小端 枚举类型 枚举类型声明 枚举类型的优点 枚举类型的使用 联合体 联合体的类型的声明 像结构体⼀…

一个浏览器插件,绕过限制,登录微信网页版!

摘要 早在2017年开始&#xff0c;微信网页版就已经住逐渐开始停止登录&#xff0c;以为了保障你的账号安全为由引导你使用电脑版微信。具体如下&#xff1a; 当然这个影响并不是所有账号&#xff0c;还是有一些账号不明觉厉地没有被影响到&#xff0c;我自己有2个号都还是可以…

【机器学习】集成语音与大型语音模型等安全边界探索

探索集成语音与大型语言模型&#xff08;SLMs&#xff09;的安全边界 一、引言二、SLMs的潜在安全风险三、对抗性攻击与越狱实验四、提高SLMs安全性的对策五、总结与展望 一、引言 近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;集成语音与大型语言模型&#xff08…

OceanBase 4.3.0 列存引擎解读:OLAP场景的入门券

近期&#xff0c;OceanBase 发布了4.3.0版本&#xff0c;该版本成功实现了行存与列存存储的一体化&#xff0c;并同时推出了基于列存的全新向量化引擎和代价评估模型。通过强化这些能力&#xff0c;OceanBase V4.3.0 显著提高了处理宽表的效率&#xff0c;增强了在AP&#xff0…

【计算机毕业设计】谷物识别系统Python+人工智能深度学习+TensorFlow+卷积算法网络模型+图像识别

谷物识别系统&#xff0c;本系统使用Python作为主要编程语言&#xff0c;通过TensorFlow搭建ResNet50卷积神经算法网络模型&#xff0c;通过对11种谷物图片数据集&#xff08;‘大米’, ‘小米’, ‘燕麦’, ‘玉米渣’, ‘红豆’, ‘绿豆’, ‘花生仁’, ‘荞麦’, ‘黄豆’, …

2023年亚太杯A题:果园采摘机器人的图像识别,一二题

问题一&#xff1a;基于附件1中提供的可收获苹果的图像数据集&#xff0c;提取图像特征&#xff0c;建立数学模型&#xff0c;计算每幅图像中的苹果的数量&#xff0c;并绘制附件1中所有苹果的分布直方图。 对于自动采摘机器人&#xff0c;首要的能力就是识别出苹果对象&#…

数字信号处理实验四:IIR数字滤波器设计及软件实现

一、实验目的 1. 掌握MATLAB中进行IIR模拟滤波器的设计的相关函数的应用&#xff1b; 2. 掌握MATLAB的工具箱中提供的常用IIR数字滤波器的设计函数的应用&#xff1b; 3.掌握MATLAB的工具箱中提供的模拟滤波器转数字滤波器的相关的设计函数的应用。 二、实验内容 本实验为…

秋招突击——算法打卡——5/30——复习{最大上升子序列的和、面试算法缺陷补充}——新做:{回文数+补充 自定义Stoi实现、正则表达式匹配}

文章目录 复习导弹拦截——最大上升子序列和推理过程实现代码补充昨日面试 新作回文数实现代码 字符串转整数正则表达式匹配个人实现思路分析实现代码如下 参考做法思路分析实现代码 总结 复习 导弹拦截——最大上升子序列和 同样类型题目链接&#xff1a;导弹拦截重做这道题…