分类：路由

2022
09-29

详解VueRouter 路由

目录vuerouter1、认识路由的概念1.1、何为路由1.2、后端路由阶段1.3、前端路由阶段1.4、前端渲染和后端渲染？2、前端路由的规则2.1、URL的hash方式2.2、HTML5的history模式3、route-view的基础3.1认识vue-router3.2、安装和使用vue-router3.3、路由的默认路径3.4、HTML5的history模式3.5、router-link补充3.6、路由代码跳转3.7、动态路由4、路由的懒加载4.1、认识懒加载4.2、懒加载效果4.3、懒加载方式5、路由的嵌套使用5.1、认... 继续阅读 >

2021
10-20

flutter 路由机制的实现

目录实现基础_routeNamed_flushHistoryUpdatesaddpushpopremove总结整个flutter应用的运行都只是基于原生应用中的一个view，比如android中的FlutterView，flutter中的页面切换依赖于它的路由机制，也就是以Navigator为中心的一套路由功能，使得它能够完成与原生类似且能够自定义的页面切换效果。下面将介绍flutter中的路由实现原理，包括初始化时的页面加载、切换页面的底层机制等。实现基础flutter应用的运行需要依赖... 继续阅读 >

2021
09-09

Android路由框架ARouter的使用示例

目录一、添加依赖和初始化框架1、添加依赖1.1、java版本的依赖1.2、kotlin版本的依赖2、初始化SDK二、ARouter的简单使用1、界面跳转1.1、Activity界面跳转1.2、获取fragment实例1.3、注意事项2、携带基本参数的界面跳转3、携带对象的界面跳转3.1、携带序列化对象的界面跳转3.2、携带无序列化对象的界面跳转3.3、携带集合和数组的界面跳转4、界面跳转回调5、未用到的知识点一、添加依赖和初始化框架1、添加依赖在需要使用ARouter的m... 继续阅读 >

2021
09-09

Flutter开发中的路由参数处理

目录Navigator的push和pop方法代码实现最终效果Navigator的push和pop方法Navigator导航器的push和pop方法可以携带参数在页面间传递，其他变形的方法也一样。pushNamed方法原型如下：Future<T?>pushNamed<TextendsObject?>(StringrouteName,{Object?arguments,}){returnpush<T>(_routeNamed<T>(routeName,arguments:arguments)!);}除了routeName的命名路由以外，还有个可选参数argume... 继续阅读 >

2021
08-31

Flutter app页面路由以及路由拦截的实现

目录为什么要使用路由Flutter路由介绍页面结构与逻辑实现关键代码页面路由跳转为什么要使用路由在之前我们的代码中，页面跳转使用的代码如下所示：Navigator.of(context).push(MaterialPageRoute(builder:(context)=>LoginPage()),);在开发过程中，随着页面的增加，如果继续使用这种方式会有如下缺陷：代码耦合严重：涉及到页面跳转的地方就需要插入页面的构造函数，意味着需要知道其他页面的构建方式。不易维护：一... 继续阅读 >

2021
07-09

详解Angular之路由基础

目录一、路由相关对象二、路由对象的位置三、路由配置四、代码中通过Router对象导航五、配置不存在的路径六、重定向路由七、在路由时候传递数据一、路由相关对象Router和RouterLink作用一样，都是导航。Router是在Controller中用的，RouterLink是在模版中用到。二、路由对象的位置1、Routes对象配置在模块中。Routes由一组配置信息组成，每个配置信息至少包含两个属性，Path和Component。2、RouterOutlet在模版中3、RouterLink指令... 继续阅读 >

2021
05-25

Vue路由vue-router详细讲解指南

中文文档：https://router.vuejs.org/zh/VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）：route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；routes：它是个复数，表示多个的集合才能为复... 继续阅读 >

2021
04-07

详解Flutter的路由导航

Flutter的路由导航路由管理或导航管理：从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转。在原生的Android开发，是通过startActivity或startActivityForResult来完成页面的跳转的，在Flutter中如何实现呢？在Flutter中，页面之间的跳转是通过Route和Navigator来管理的：Route是页面的抽象，主要负责创建对应的界面，接收参数，响应Navigator打开和关闭；而Navigator则会维护... 继续阅读 >

2021
03-19

vue路由实现登录拦截

一、概述在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。vue-router提供了导航钩子:全局前置导航钩子beforeEach和全局后置导航钩子afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。导航钩子有3个参数： 1、to:即将要进入的目标路由对象； 2、from:当前导航即将... 继续阅读 >

2021
02-26

vue 动态添加的路由页面刷新时失效的原因及解决方案

问题描述昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现了404的情况。场景后台管理系统的权限控制是通过在前端页面定义权限code，把code给后台同学保存配置到表中，之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配，code相等的页面就是有权限的页面，再通过router.addRoute()动态添加到路由中，有权限的路由才可以被访问，否则会提示无... 继续阅读 >

2020
11-10

Vue路由权限控制解析

前言本人在公司主要负责中后台系统的开发，其中路由和权限校验算是非常重要且最为基本的一环。实际开发项目中，关于登录和路由权限的控制参照了vue-element-admin这个明星项目，并在此基础上基于业务进行了整合，接下来我会以这个项目为例，仔细地剖析整个路由和权限校验的过程，也算是对这个知识点的一些总结。项目总体目录结构进入今天主题之前，我们先来梳理下整个项目,src目录下的。api:接口请求assets:静态资源compon... 继续阅读 >

2020
11-06

nuxt 路由、过渡特效、中间件的实现代码

在pages下的文件.vue文件会被自动加载成路由0、声明式导航<nuxt-linkto="/">首页</nuxt-link>用法和router-link用法一致1、定义一级路由在pages下创建.vue文件,访问路径后加上/文件名,访问index.vue对应的路径为'/';2、创建多级路由在pages创建文件夹,文件夹内创建.vue文件访问路径:/文件夹名/文件名pages/--|user/-----|index.vue-----|one.vue--|index.vue将被转换成:router:{routes:[{name:'index',path:'/',... 继续阅读 >

2020
10-10

Vue路由 重定向和别名的区别说明

重定向重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})重定向的目标也可以是一个命名的路由：constrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})甚至是一个方法，动态返回重定向目标：constrouter=newVueRouter({routes:[{path:'/a',redirect:to=>{//方法接收目标路由作为参数//ret... 继续阅读 >

2020
10-10

vue路由结构可设一层方便动态添加路由操作

动态添加路由基本功能letroutes=[{path:'/login',name:'login',component:()=>import('../components/Login.vue')}]this.$router.addRoutes(routes)涉及多层路由嵌套如图单纯使用addRoutes层级结构不同修改路由结构例：{name:'account',path:'/account/account',meta:{title:'个人中心',requireAuth:true},component:account,children:[{name:'account'... 继续阅读 >

2020
10-09

vue 实现把路由单独分离出来

建立一个router.js文件引入importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../components/home/home.vue'然后注册Vue.use(VueRouter);constrouter=newVueRouter({mode:'history',base:__dirname,routes:[{path:historyUrl+'/',component:Home,name:'主页'},]}最后暴露出云exportdefaultrouter在main.js里面直接引入然后就可以用了importrouterfrom'./main... 继续阅读 >

2020
10-09

vue-路由精讲 二级路由和三级路由的作用

1、我们继续上一个案例vue--路由精讲制作导航--从无到有，在about文件夹下创建一些文件夹。如下：2、编写about.vue代码。当我们点击导航中“关于我们”，就会显示该部分内容。代码中写了四个可供点击后可以跳转的模块。和<router-view></router-view>表示你点击了哪个组件，哪个组件就会渲染到这里来。其中注意：css样式,我们直接引入bootstrap中的导航的样式，在标签中直接添加class属性的值就可以了。about.vue代码... 继续阅读 >