Vue（VueRouter）：一篇详细解路由知识点 && 路由跳转传参 && 组件缓存 || 涵盖 && eslint插件 && 代码修正

已于 2023-10-29 17:07:38 修改
阅读量180 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 缓存 前端
于 2023-09-07 10:21:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/132731477
版权
本文详细介绍了Vue Router的各种导航方式，包括声明式导航的链接高亮、动态路由传参、编程式导航的两种跳转方式，并探讨了组件缓存的实现，以及如何通过ESLint进行代码规范。此外，还讨论了Vue项目的自定义创建和代码自动修正的方法。
摘要由CSDN通过智能技术生成

Vue导航以及自定义创建项目

文章目录

一、声明式导航-导航链接

1.需求

实现导航高亮效果

在这里插入图片描述

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
  • 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： 发现音乐

  <div
了解本专栏 订阅专栏 解锁全文 超级会员免费看
脱发使我稳重
关注
专栏目录
订阅专栏
vue-router之路由跳转,组件缓存，路由间传值
weixin_43805387的博客
09-30 932
设置目录跳转路径 <nav> <ul class="nav nav-pills"> <router-link to="/news/sport" tag = "li" > <a>体育</a> </router-link> &lt...
vue路由全面详解（下）：路由守卫、缓存路由组件（终于要把路由的常用知识写完啦）
2401_84091502的博客
04-20 975
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
如何解决路由组件的缓存问题
qq_42651173的博客
07-23 630
场景： 页面中路由地址发生了变化，但是内容没有更新 原因： 两个地址都匹配同一个组件，这个组件在路由切换的过程中，并没有重新销毁生成 解决方法： 1.给router-view添加key属性 -类似于v-if：会销毁重建组件，有一定的性能损耗 <router-view :key="$route.fullPath"/> 2.使用watch监听id变化重新拉取接口 export default { name: 'TopCategory', components...
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue知识点——路由（跳转页面、传参、keep-alive路由缓存、路由守卫等）
TKY666的博客
08-07 4247
在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在 App.vue 中的，当更改 URL 后只改变 App.vue 页面中路由部分对应的内容，也就是说通过路由显示时，也是属于局部刷新效果。注：在 App.vue 中通过显示路由内容。............
vue路由全面详解（下）：路由守卫、缓存路由组件（终于要把路由的常用知识写完啦
2401_84435555的博客
04-27 987
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
Vue Router 路由生命周期钩子/路由导航守卫/路由鉴权
猫老板的豆
04-12 2417
Vue Router 提供了路由钩子（Route Hooks），允许你在路由发生变化时执行一些操作。这些钩子可以在路由进入、离开等关键时刻触发，从而实现一些特定的功能，比如页面权限控制、数据预加载等。路由守卫简单来讲就是监听页面进入修改，和离开的功能。to：即将要进入的路由对象from：当前导航正要离开的路由next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是。
vue-route路由最常用最详细的一篇知识点总结
爱码士&的博客
08-16 840
本章知识点全部内容总结来自于尚硅谷男神天禹老师vue3课程资料，感谢老师的开源精神和无私奉献。整理好以便于以后的复习也希望能分享给需要的人，附上老师课程地址，讲课真的很不错课程地址连接 目录 路由 1.基本使用 2.几个注意点 3.多级路由（多级路由跳转） 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.的replace属性 9.编程式路由导航 10.缓存路由组件 11.两个新的生命周期钩子 12.路由守卫 13.路由器...
Vue2知识点（七）（路由vue-router详解）
薇z的博客
07-13 1104
内容包含：vue-router的理解，对SPA应用的理解，什么是路由，路由分类，基本使用，注意点，多级路由，路由的query参数，命名路由，路由的params参数，路由的props配置，``的replace属性，编程式路由导航，缓存路由组件，两个新的生命周期钩子，路由守卫，路由器的两种工作模式...
【Vue知识点】路由router详解
m0_50785976的博客
08-05 2249
路由router详解
浅谈vue-router2路由参数注意的问题
08-28
在Vue.js应用中，路由管理是非常重要的一部分，Vue Router作为官方推荐的路由库，使得页面间的导航变得简单而高效。本文将重点讨论Vue Router 2中的路由参数使用时需要注意的一些问题，帮助开发者避免常见错误，提升...
jeecg3版本的vue，离线启动
sharesb的博客
10-16 333
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 712
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
原型链+instanceof+Vue底层原理
m0_65985318的博客
10-18 907
在 Vue 组件中，render 函数是一个选项，它返回一个虚拟节点 (VNode)，或者是一个包含多个 VNode 的数组。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 845
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Vue 3 和 Vue Router 使用 createWebHistory 配置
liuchao的博客
10-16 304
在 Vue 3 项目中，如果使用 Vue Router 并希望启用 HTML5 History 模式，需要在创建路由器实例时传入作为历史模式的配置。此外，还需要确保在生产环境中设置正确的基本路径（base），这样才能正确处理前端路由。
基于PHP+MySQL+Vue的医院预约挂号管理系统
最新发布
m0_67428300的博客
10-19 794
基于PHP+MySQL+Vue的医院预约挂号管理系统
【vue】指令补充+样式绑定+计算属性+侦听器
zxj20041003的博客
10-13 900
所谓指令修饰符就是让指令的 功能更强⼤，书写更便捷如何监听回⻋键？​ 答: 1、 @keydown.enter -> 回⻋按下​ 2、@keyup.enter -> 回⻋抬起如何阻⽌默认⾏为、阻⽌冒泡？​ 答: 1、@click.prevent -> 阻⽌默认⾏为​ 2、@click.stop -> 阻⽌冒泡​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌v-model的3个修饰符的作⽤是什么？
vue3日历组件库Vue-Cel使用
weixin_68658847的博客
10-15 333
vue3日历组件库Vue-Cel使用
Vue.js教程：vue-router基本用法与案例解析
例如，在app.vue中，`<router-view class="view" keep-alive transition="slide"></router-view>`这一行代码表示，Vue Router将在这个地方插入当前激活的路由组件，并且使用`keep-alive`属性来缓存组件状态，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值