Vue3-VueRouter

客户端 vs. 服务端路由​

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML,然后重新加载整个页面。

然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,尤其是在更偏向“应用”的场景下,因为这类场景下用户通常会在很长的一段时间中做出多次交互。

在这类单页应用中,“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。

路由使用

        1.在app上挂载路由

import router from './router/index'
app.use(router)app.mount('#app')

        2.配置路由(一般放在router<路由器>文件夹下)

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(),routes:[{path:'/home',component:Home},{path:'/about',component:About}]
})
export default router

        3.使用路由(RouterLink、RouterView,useRouter、useRoute)

<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. 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载

​​​​​​​

路由器工作模式

`history`模式

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

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

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

`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

3. 跳转路由(记得要加完整路径):
 

   <router-link to="/news/detail">xxxx</router-link><!-- 或 --><router-link :to="{path:'/news/detail'}">xxxx</router-link>

4. 记得去`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参数

传递参数

<!-- 跳转并携带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>

使用useroute接收参数

params参数

传递参数

<!-- 跳转并携带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:传递params参数时,若使用to的对象写法,必须使用name配置项,不能用path

备注2:传递params参数时,需要提前在规则中占位。eg:path:'/goods/:id',有几个参数就写几个/:XX

总结:

query 传参配置的是 path,而 params 传参配置的是name,且在 params中配置 path 无效
query 传递的参数会显示在地址栏中,而 params传参不会
query 传参刷新页面数据不会消失,而 params传参刷新页面数据回消失
params 可以使用动态传参,动态传参的数据会显示在地址栏中,且刷新页面不会消失,因此可以使用动态 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. 浏览器的历史记录有两种写入方式:分别为```push```和```replace```:

       - ```push```是追加历史记录(默认值)。
       - `replace`是替换当前记录。

    3. 开启`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. 作用:将特定的路径,重新定向到已有路由。

{path:'/',redirect:'/about'
}

​​​​​​​可以用来处理状态问题进行重定向,eg用户输入错误网址

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

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

相关文章

03-3.2.1 队列的基本概念

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

(文章复现)基于共享储能服务的智能楼宇双层优化配置

参考文献&#xff1a; [1]张浩鹏,李泽宁,薛屹洵,等.基于共享储能服务的智能楼宇双层优化配置[J/OL].中国电机工程学报,1-12[2024-05-22]. 1.摘要 为降低城市化进程中楼宇储能投资成本&#xff0c;提出一种基于共享储能服务的智能楼宇&#xff08;Intelligent Buildings&#…

mysql启动出现Error: 2 (No such file or directory)

查看mydql状态 systemctl status mysqlThe designated data directory /var/lib/mysql/ is unusable 查看mysql日志 tail -f /var/log/mysql/error.logtail: cannot open ‘/var/log/mysql/error.log’ for reading: No such file or directory tail: no files remaining 第…

【数智化CIO展】吉家宠物CIO张志伟:深度挖掘数据价值是数字化发展趋势,才能实现企业精细化运营...

张志伟 本文由吉家宠物CIO张志伟投递并参与由数据猿联合上海大数据联盟共同推出的《2024中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业&#xff1a;观远数据 大数据产业创新服务媒体 ——聚焦数据 改变商业 中国“宠物经济”热潮不断攀升&#xff0c;国内宠物市场的竞…

【牛客面试必刷TOP101】Day28.BM49 表达式求值和BM52 数组中只出现一次的两个数字

文章目录 前言一、BM49 表达式求值题目描述题目解析二、BM52 数组中只出现一次的两个数字题目描述题目解析总结 前言 一、BM49 表达式求值 题目描述 描述&#xff1a; 请写一个整数计算器&#xff0c;支持加减乘三种运算和括号。 数据范围&#xff1a;0∣s∣≤100&#xff0c;…

香蕉派BPI-F3 进迭时空(SpacemiT)K1RISC-V开发板软件下载链接

香蕉派BPI-F3是一款工业级 8核RISC-V开源硬件开发板&#xff0c;它采用进迭时空&#xff08;SpacemiT&#xff09; K1 8核RISC-V芯片设计&#xff0c;CPU集成2.0 TOPs AI计算能力。4G DDR和16G eMMC。2个GbE以太网接口&#xff0c;4个USB 3.0和PCIe M.2接口&#xff0c;支持HDM…

跟着小白学linux的基础命令

小白学习记录&#xff1a; 前情提要&#xff1a;Linux命令基础格式!查看 lsLinux 的7种文件类型及各颜色代表含义 进入指定目录 cd查看当前工作目录 pwd创建一个新的目录(文件夹&#xff09; mkdir创建文件 touch查看文件内容 cat、more操作文件、文件夹- 复制 cp- 移动 mv- 删…

代码随想录算法训练营第四十八天| 70. 爬楼梯 (进阶)、322. 零钱兑换、279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 题目链接&#xff1a;70. 爬楼梯 &#xff08;进阶&#xff09; 文档讲解&#xff1a;代码随想录/爬楼梯 &#xff08;进阶&#xff09; 状态&#xff1a;已完成&#xff08;0遍&#xff09; 解题过程 这几天博主忙着面试和入职&am…

25-unittest执行顺序

在使用unittest框架时&#xff0c;各个测试方法的执行顺序是怎样的&#xff0c;本篇通过简单案例讲解unittest执行顺序。 一、定义测试类 import unittestclass Demo(unittest.TestCase):def setUp(self):print("start!")def tearDown(self):print("end!"…

前端工程化工具系列(八)——Commitizen(v4.3.0):Git 提交规范化工具

在 前端工程化工具系列&#xff08;四&#xff09;—— Commitlint(v19.3.0)&#xff1a;规范化 Git 提交 中曾介绍过 commitlint&#xff0c;它主要负责检查提交信息的规范性。而本文中的 commitizen&#xff0c;则是提供给了一个交互式的命令行界面&#xff0c;引导开发者按照…

度安讲 | 第二期「安全左移·业务护航」技术沙龙成功举办

当下&#xff0c;“安全左移”作为落地DevSecOps的重要实践之一&#xff0c;已在业界达成共识。DevSecOps作为一种集开发、安全、运维于一体的软件开发和运营模式&#xff0c;强调在敏捷交付下&#xff0c;“安全”在软件开发生命周期的全覆盖贯穿和核心位置。所谓“安全左移”…

Git命令行

文章目录 初始化配置仓库 其实Idea里自带的命令能满足工作多数场景&#xff0c;但也会使思维受限&#xff0c;总结下Git里常用的命令行对Idea进行补充 初始化配置 # 查看git配置&#xff08;重点关注账号和邮箱&#xff09; git config --list# 设置全局姓名和邮箱 git config…

不同类型红酒的保存期限与品质变化

云仓酒庄雷盛红酒&#xff0c;以其多样的品种和与众不同的风味吸引了无数葡萄酒爱好者。然而&#xff0c;不同类型和风格的红酒在保存过程中&#xff0c;其期限和品质变化也各不相同。本文将深入探讨这个问题&#xff0c;以帮助消费者更好地理解和欣赏云仓酒庄雷盛红酒的多样性…

【Linux】Linux环境基础开发工具_5

文章目录 四、Linux环境基础开发工具Linux小程序---进度条git 未完待续 四、Linux环境基础开发工具 Linux小程序—进度条 上篇我们实现了一个简易的进度条&#xff0c;不过那仅仅是测试&#xff0c;接下来我们真正的正式实现一个进度条。 接着编写 processbar.c 文件 然…

web刷题记录(4)

[GKCTF 2020]cve版签到 进来应该是给了个提示了&#xff0c;就是要以.ctfhub.com结尾 还有一个超链接&#xff0c;这题的ssrf还是挺明显的&#xff0c;抓包看看 发现回显里面有提示 说是和本地有关&#xff0c;那么也就是说&#xff0c;要访问127.0.0.1&#xff0c;大概意思就…

ModuleNotFoundError: No module named ‘torch_scatter‘

大概率是cuda的版本问题&#xff0c;看了很多解决方案&#xff0c;都不舒服。 直到看到这篇 新建一个名字叫torch_scatter.py的脚本&#xff0c;然后就可以调用本地的脚本了。 #torch_scatter.py import torch from typing import Optionaldef scatter_sum(src: torch.Tenso…

【POSIX】运行时so库动态加载

运行时可以自己自定义so库的动态加载框架&#xff0c;主动去加载某些库&#xff0c;并调用其中的某些方法 首先写一些方法&#xff0c;并生成so库 // hello.cpp#include <iostream>/*使用 nm 命令查看 so 库的内容 */// 1. 使用extern // dlsym(handle, "hello&qu…

镜头效果技术在AI绘画中的革新作用

随着人工智能技术的飞速发展&#xff0c;AI绘画已经成为艺术与科技交汇的前沿领域。在这一领域中&#xff0c;镜头效果技术的应用不仅为艺术家和设计师们提供了全新的创作工具&#xff0c;更在艺术创作中扮演了革命性的角色。本文将深入探讨镜头效果技术在AI绘画中的应用&#…

npm发布自己的插件包指南

引言 npm&#xff08;Node Package Manager&#xff09;是 JavaScript 和 Node.js 开发中最流行的包管理工具。它允许开发者轻松地分享和重用代码&#xff0c;极大地提高了开发效率。发布自己的 npm 插件包&#xff0c;不仅可以提高代码的复用性&#xff0c;还可以分享你的工作…

Visual Studio和BOM历史渊源

今天看文档无意间碰到了微软对编码格式解释&#xff0c;如下链接&#xff1a; Understanding file encoding in VS Code and PowerShell - PowerShell | Microsoft LearnConfigure file encoding in VS Code and PowerShellhttps://learn.microsoft.com/en-us/powershell/scrip…