vue2 路由相关知识点

已于 2023-04-20 14:49:57 修改
阅读量317 收藏 4
点赞数 7
分类专栏： vue 文章标签： javascript vue.js 前端
于 2023-04-20 14:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu_tong_/article/details/130265565
版权
本文介绍了在Vue.js中如何搭建和配置vue-router，包括安装插件、声明式与编程式导航的使用，以及路由参数的传递（params和query）。同时，讨论了meta信息的利用和如何重写push及replace方法以避免NavigationDuplicated警告。
摘要由CSDN通过智能技术生成

文章目录

1. 搭建路由组件

 
解释一下啥是路由 : 路由就是 一组映射关系 (key - value) , key 为路径 , value 可能是 function 或 component.

 
在 vue2 中想要使用 路由 需要安装一个插件 vue-router .

 

1.1 安装 vue-router

 
在这里插入图片描述

 

创建 对应 目录 与 组件

在这里插入图片描述

 

1.2 配置路由

 
在项目中 配置的路由 一般存放在 router 文件夹中

在这里插入图片描述

 

2. 使用路由

 

图一 :

在这里插入图片描述

 
图二 :

在这里插入图片描述

 

3. 路由的跳转

 
上面 是 手动 通过 url 来进行路由的切换 ，这肯定是不行的 , 用户看不太懂这些，下面我们就来看看路由的两种跳转模式

 

3.1 声明式导航

 
第一种路由跳转 : 声明式导航 通过 router-link 标签 进行路由跳转

在这里插入图片描述

 

3.2 编程式导航

 
第一种路由跳转 : 编程式导航 使用 push | replace 进行路由跳转.

 
关于声明式导航 能做的 ，编程式导航都能做 ， 关于 编程式导航 除了可以进行路由跳转 ，还可以做一些其他的业务逻辑

在这里插入图片描述

 

4. 路由传参

 

关于 路由传参 ， 参数有两种

  1. params 参数 : 属于路径当中的一部分 , 需要注意 ，在配置路由的时候 ，需要占位
  2. query 参数 : 不属于 路径当中的一部分 ，类似 ajax 中的 queryString /student?k=v&kv= 不需要传参

 

4.1 路由传递参数 : 字符串形式

 

图一 :

在这里插入图片描述

 

图二 ：

在这里插入图片描述

 
使用模板字符串

在这里插入图片描述

 
图二 :
在这里插入图片描述

 
图三 :

在这里插入图片描述

 

4.2 路由传递参数 : 对象写法

 

图一 :

在这里插入图片描述

 

图二 :

在这里插入图片描述

 

图三 :

在这里插入图片描述

 

4.3 路由传参相关面试题

 
题目一 : 路由传递参数 (对象写法) path 是否可以结合 params 参数一起使用 ?

 
图一 :

在这里插入图片描述

 
图二 :

在这里插入图片描述

 

题目二 : 如何 指定 params 参数 可传可不传 ？

 
图一 :

在这里插入图片描述

 

题目三 ： params 参数 可以传递也可以不传递 ，但是如果传递是空串如何解决 ?

在这里插入图片描述

 
题目四 : 路由组件 能不能传递 props 数据

 

图一 :

在这里插入图片描述

 
图二 :

在这里插入图片描述

 
图三 :

在这里插入图片描述

 

关于 props 传递参数 ，总的来说 ， 是对 获取 params 参数 和 query 参数的 简化 .

 

5. meta 使用

 

图一 :

在这里插入图片描述

 

6. 重写 push 和 replace 方法

 
push 和 replace 都是 编程式 路由 使用的 ， 这里如果 多次执行 push 或 replace 方法 会抛出 NavigationDuplicated 的警告错误 .

 
演示一下 :

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 
下面来解决一下这个问题 :

 
图一 : 治标不治本的解法

在这里插入图片描述

 
图二 : 彻底解决

在这里插入图片描述

其实这个问题 处理不处理 对程序的影响不大 ，只不过 作为程序猿看到一片红 难免有点心理不好受.

例子代码 :

牧..
关注
专栏目录
Vue.js学习系列一 —— vue-router2学习实践笔记（附DEMO）
violetjack的专栏
12-22 919
想学习Vue的SPA应用，路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后，将我的个人经验分享出来，希望可以让同样对路由不知所措的同学有所帮助。 注意： 本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板； 本文知识点是基于Vue2.0和vue-route 2的，更多内容请参考Vue.js官网和vu
【vue2】对路由的理解
嗨，朋友你好！我是前端领域的工作者
01-25 5262
vue路由概念、路由写法、路由模式、路由重定向、路由跳转传参方式
vue2进阶篇：vue-router之基础路由
刘大猫
07-08 704
vue2进阶篇：vue-router之基础路由
vue2——路由
weixin_45691995的博客
07-15 2643
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！作用：让不展示的路由组件保持挂载，不被销毁。(组件不展示就会被销毁)实现切换（active-class可配置高亮样式）include=“name”,name指的是组件名。​ 作用：让路由组件更方便的收到参数。分类：全局守卫、独享守卫、组件内守卫。配置路由，声明接收params参数。实现路由跳转，让路由跳转更加灵活。作用：可以简化路由的跳转。作用：对路由进行权限控制。文件里面的内容复制到。
VUE2速成-2（组件及路由）
beeworkshop的博客
05-14 933
文章目录一、组件1. 创建组件2. 引用组件3. 组件之间如何传递参数 一、组件 1. 创建组件 生成 <template> <div> <!-- 必须是唯一根元素 --> <p>组件:{{ title }}-{{ num }}</p> <div> <p>{{ count }}</p> <button @click="count +=
Vue2路由动画效果的实现代码
08-30
下面将详细介绍Vue2路由动画效果的实现代码的知识点。 一、路由动画效果的实现原理 路由动画效果的实现原理是通过使用Vue的过渡动画机制，在路由切换时，使用不同的过渡动画，使得路由的切换更加流畅、自然。Vue的...
vue2路由方式--嵌套路由实现方法分析
10-15
通过上述知识点的总结，我们可以明白如何在 Vue2 中实现嵌套路由，并且理解了其背后的机制。对于想要深入理解 Vue.js 路由管理的开发者而言，掌握嵌套路由是必不可少的。在实际应用中，合理使用嵌套路由可以使我们的...
详解给Vue2路由导航钩子和axios拦截器做个封装
08-27
下面是相关知识点的详细解释： 1. 路由导航钩子 路由导航钩子是Vue提供的一种机制，用于在路由跳转前、后执行某些逻辑操作。在本文中，我们使用路由导航钩子来实现用户鉴权和重定向。通过在路由配置中添加meta对象...
vue通过路由实现页面刷新的方法
08-28
知识点三：使用路由 replace 方法实现页面刷新 为了解决上述问题，我们可以使用路由 replace 方法来实现页面刷新，例如： ```javascript this.$router.replace({ name: 'cart' }) // 处理返回刷新问题 this.$...
Vue2基础九、路由
李宥的博客
07-27 1281
- Vue中路由：`路径` 和 `组件` 的 映射 关系
Vue2 路由（最最详细简单易通）看这篇就够了
2301_77638787的博客
08-16 6710
Vue2 路由（最最详细简单易通），帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。
laravel 一分钟实现限制 IP 访问频率
lw545034502的博客
02-19 2556
1、在 App\Http\Middleware目录下面建一个中间件文件 我习惯用artisan 命令来新建一个中间件，如下，也可以手动创建。 php artisan make:middleware ThrottleRequests 就会看到如下文件： 2、将下面代码完成复制到 上面创建的ThrottleRequests文件中。（用下面代码替换原文件里面的内容） <?php namespace App\Http\Middleware; use Closu...
Vue2路由的详细讲解
热门推荐
zxdznyy的博客
10-22 1万+
在之前的原生学习中，一个项目通常会有一个主页，index.html，以及很多个分页。想要通过主页去往其它页面，大部分情况我们使用链接a标签。但是在vue中，vue大多开发单页面应用，也就是SPA项目，倘若想要在SPA项目中看到多个组件，则需要凭借路由。本篇博客就针对路由进行全面讲解，希望对大家有帮助！前面四节讲述的是如何用router-link来渲染组件，这种方式叫做声明式导航，在浏览器中，点击链接实现导航的方式，叫做声明式导航。而编程式导航，则是调用API方法进行导航。
Vue2实现动态路由配置
qq_30907143的博客
09-09 1万+
关于动态路由有前端实现和后端直接根据登录用户权限返回对应路由表两种方式实现，这里所讲的是偏前端方式实现（根据登录后后端返回用户roles字段进行身份判断）
关于vue2路由
good2night的博客
06-25 559
路由是指在 Web 应用程序中，根据 URL 的不同，将用户请求的不同页面展示给用户的过程。在传统的 Web 应用程序中，每个页面都有一个唯一的 URL，当用户点击不同的链接时，浏览器会向服务器发送请求，服务器会返回不同的 HTML 页面。但是在单页应用程序（SPA）中，所有的页面都在同一个 HTML 页面中，当用户点击不同的链接时，JavaScript 会根据 URL 的不同，动态地更新页面的内容。Vue.js 的路由系统可以帮助我们实现这个过程。
Vue2.路由
切图仔
04-27 3999
前端路由（Hash 地址与组件之间的对应关系） SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 1.前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组
vue--实现学生信息管理案例
小白小白从不日别的博客
12-08 6518
1.铺设页面, 准备初始的数据并最终完整页面结构设计和渲染到页面上 <template> <div id="app"> <div> <span>姓名:</span> <input type="text" /> </div> <div> <span>年龄:</span> <input type="nu...
VUE:学生列表案例——内部指令v-for与v-on简单应用
fuzhijieabc的博客
12-01 4670
#本案例需要熟悉v-for与v-on这两个vue内部指令，下面通过两个简单的案例，带领大家迅速熟悉一下这两个常用的内部指令 v-for指令：主要用于列表的渲染与循环数组 简单案例： 关键代码部分： <div id="app"> <div v-for="(item,index) in list" data-id=“index"> 索引是：{{index}}，元素内容是：{{item}} </div> </div> <script>
vue路由相关知识点
最新发布
09-07
Vue路由相关知识点包括： 1. **导航守卫**[^1]: - 前置守卫 (Before Navigation Guards): 在导航开始之前执行，可以用来验证权限、设置默认路径、执行异步操作等。 ```javascript beforeEach((to, from, next) =...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值