今日心血来潮，想起我们使用Vue开发单页面项目基本会用到 vue-router 路由插件，通过改变Url，在不刷新页面的情况下，更新页面视图。那么 vue-router 它是怎么实现路由跳转页面的呢？ 好吧，没人理我就自己玩:joy:。我(们)先来回忆下路由的配置: router/index.js
import Vue from 'vue'
......
381
0
0
2023-09-16
目录介绍路由跳转和传参解决路由重复点击路由沉积的问题解决路由跳转后不能回到顶部的页面顶部的问题路由导航守卫和案例展示访问外部链接介绍vue-router相当于vue内部跳转链接，将需要切换的页面在vue-router里注册，在项目里配置就能完成页面的切换，它不仅能完成项目的切换，还能实现参数的传递，它还有个很重要的功能路由导航守卫（导航守卫分为前置导航守卫，
......
382
0
0
2023-06-22
目录前言概念1、vue路由传参2、vue路由重定向实际使用场景路由传参1、使用步骤2、params传参2-1、路由属性配置参数3、query传参4、url字符串拼接5、接收路由参数的方法，分 ? 和 : 两种接收方式6、路由传参的示例路由重定向1、路由重定向语法2、实际示例其他拓展最后前言前端开发过程中，作为前端开发者来说关于vue的使用并不陌生，vue相关
......
510
0
0
2023-06-08
目录全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫可用的配置 API使用组合 API完整的导航解析流程正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：cons
......
337
0
0
2023-05-10
目录1、导航守卫二、功能展示 三、原理四、功能实现⛵小结1、导航守卫“导航” 表示路由正在发生改变正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些
......
432
0
0
2023-04-02
目录前言1. 通过动态路由参数传递2. 通过query字符串传递3. props 隐式传递前言vue 页面路由切换时传参的方式有如下几种：动态路由参数它隐藏字段信息，相对于来说较安全，同时地址栏中的地址也相对较短它必须是先定义后使用，一般用于根据固定参数，返回对应的数据所用query字符串 ?id=1通过search字符串的方式来在地址栏中传递数据，相对于来
......
416
0
0
2023-03-13
目录路由传参效果展示params的类型（后附源码）query参数的类型路由name路由传参效果展示通过传参，可以让Persons路由组建中的内容，在新的路由组件Show显示出来，Show路由组件要嵌套到Persons路由组件中Persons路组件中的内容params的类型（后附源码）path：‘show/:id/:realname’ :id/:r
......
404
0
0
2023-02-13
目录路由传参接收以及传参对象为对象时的问题场景接收路由参数vue路由传参总结Vue路由传参路由传参接收以及传参对象为对象时的问题具体代码如下所示：场景<div @click='toDetail'>查看详情</div>
路由传参不能直接传一个对象，需要使用JSON.stringify()方法将其转换成一个字符串，然后在其他页面接受的时
......
641
0
0
2023-02-02