分类：Router

2022
02-10

Vue Router根据后台数据加载不同的组件实现

目录实际项目中遇到的需求有一些不好的实现方式个人感觉比较好的实现方式功能已实现，但我又开始了新的思考最终方案——高阶组件实际项目中遇到的需求同一个链接需要加载不同的页面组件。根据用户所购买服务的不同，有不同的页面展现。有一些不好的实现方式直接把这几个组件写在同一个组件下，通过v-if去判断。如果这么做的话，甚至可以不使用vue-router，直接把所有组件，都写在一个文件里面，全部通过v-if判断，也是可行的。... 继续阅读 >

2021
09-24

如何在Vue 3中扩展Vue Router链接详解

前言<router-link>标签是一个很好的工具，可以在你的Vue应用程序的不同页面之间进行导航，但当导航到一个外部链接时，它不是一个工具，为此，你应该使用一个普通的<a>标签。也许这只是我的问题，但很多时候，我都懒得去理会这其中的差别。其他时候，链接可能是动态的，也就是说，来自数据库或一些用户提供的数据源。在这种情况下，你根本不知道这个链接是外部的还是内部的，而且在每个可能使用这个链接的地方手动做V-if是多么痛... 继续阅读 >

2021
07-17

MySQL Router实现MySQL的读写分离的方法

目录1.简介2.配置MySQLRouter2.1安装MySQLRouter2.2启动并测试MySQLRouter3.MySQLRouter的配置文件解释1.DEFAULT片段的配置。2.logger片段的配置。3.routing片段的配置。4.为MySQLRouter提供SysV脚本1.简介MySQLRouter是MySQL官方提供的一个轻量级MySQL中间件，用于取代以前老版本的SQLproxy。既然MySQLRouter是一个数据库的中间件，那么MySQLRouter必须能够分析来自前面客户端的SQL请求是写请求还是读请求，以便决定这... 继续阅读 >

2021
06-23

如何处理vue router 路由传参刷新页面参数丢失

目录概述方法一：通过params传参方法二：通过query传参方法三：使用props配合组件路由解耦概述常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。路由传参一般有如下几种方式，下面主要介编程式导航router.push的传参方式：方法一：通过params传参路由配置如下：{path:'/detail/:id',//若id后面加?代表这个参数是可选的name:'detail',component:Detail}通过$route... 继续阅读 >

2021
06-23

详解vue中$router和$route的区别

我们在vue项目中一般都会用到路由，而vue-router是vue.js官方的路由管理器。this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的path,name,params,query等属性。this.$router：全局的router实例。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如history对象），任何页面也都可以调用其push(),replace(),g... 继续阅读 >

2021
05-25

vue-router钩子函数实现路由守卫

概述何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作；vue-router一共给我们提供了三大类钩子函数来实现路由... 继续阅读 >

2021
04-07

React Router 如何使用history跳转的实现

在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转，需要用到react路由的historyreplace方法和push方法使用形式一样，replace的作用是取代当前历史记录go，此方法用来前进或者倒退，history.go(-1);goBack，此方法用来回退，history.goBack();goForward，此方法用来前进，history.goForward();1.hookimport{useHistory}from'react-router-dom';functiongoPage(e){history.push({pathname:"/home",stat... 继续阅读 >

2021
04-07

浅谈React Router关于history的那些事

如果你想理解ReactRouter，那么应该先理解history。更确切地说，是history这个为ReactRouter提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。npminstall--savehistory存在三类history，分别时browser，hash，与memory。history包提供每种history的创建方法。import{createBrowserHistory,createHashHistory,createMemoryHistory}from'history'如果你使用ReactRo... 继续阅读 >

2020
12-02

Vue router安装及使用方法解析

对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。安装基于传统，我更喜欢采用npm包的形式进行安装。npminstallvue-router--save当然，官方采用了多种方式进行安装，包括bower,cdn等。基本用法在HTML文档中使用，只需要利用v-link这个directive就行了，如：<av-link="{path:'/view-a'}">Gotoview-a</a>ps:v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为t... 继续阅读 >

2020
11-03

详解vue-router的导航钩子(导航守卫)

在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。vue官方提供的路由管理器vue-router提供的导航钩子，通过跳转或取消的方式守卫导航。以下总结了路由钩子函数的使用方法和一些使用场景。一、全局守卫router.beforeEach路由改变前的钩子constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{......})其中：to：将要访问的路径from：代表从哪个路径跳转来的next：是一... 继续阅读 >

2020
10-10

如何手写简易的 Vue Router

前言还是那样，懂得如何使用一个常用库，还得了解其原理或者怎么模拟实现，今天实现一下vue-router。有一些知识我这篇文章提到了，这里就不详细一步步写，请看我手写一个简易的Vuex基本骨架Vue里面使用插件的方式是Vue.use(plugin)，这里贴出它的用法：安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数传入。这个... 继续阅读 >

2020
10-09

Vue Router中应用中间件的方法

中间件是我们在软件开发中的一个古老而强大的概念，当我们在应用程序中使用路由相关模式时，它非常有用。如果您不太了解中间件的含义，Nodejs框架Express里的中间件可以帮助您了解它们的工作原理。但是，中间件仅适用于后端吗？不，当应用程序中有路由时，中间件在前端或后端中就会非常常见。比如现在流行的单页应用程序。有一些示例可以说明，何时可以使用中间件：不允许未登录用户访问您的网页。仅允许某些类型的用户查看页... 继续阅读 >

2020
10-09

解决vue-router路由拦截造成死循环问题

笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置constrouter=newRouter({routes:[{path:'/login',name:'login',component:Login,meta:{isShow:true}},{path:'/',component:Layout,redirect:'/home',meta:{title:"首页菜单"},children:[{path:'home',name:'home',component:()=>import('@/views/Hmoe'),meta:{title:"首页"}}],}]})... 继续阅读 >

2020
10-08

使用React-Router实现前端路由鉴权的示例代码

React-Router是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是就是React-Router。本文想写一下React-Router的使用，但是光介绍API又太平淡了，而且官方文档已经写得很好了，我这里就用一个常见的开发场景来看看React-Router是怎么用的吧。而我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本... 继续阅读 >

2020
10-08

解决VUE-Router 同一页面第二次进入不刷新的问题

最近正好遇到一个问题，修改用户的头像，修改后再进入用户主页，发现改了之后即使数据变了。。页面也不会重新渲染。。。下面提供几种解决方案来给予大家参考：1.可以在刷新的页面定义一个参数,这样每次都会渲染出不同的页面：route实例化命名配置：{//用户信息path:'/accountDetail/:randKey',name:'accountDetail',component:accountDetail,meta:{requiresAuth:true}},跳转的地方配置：varchars=['0... 继续阅读 >

2020
10-08

vue-router之解决addRoutes使用遇到的坑

最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。场景复现：做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是：前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到... 继续阅读 >