当前位置:首页 > 技术分析 > 正文内容

若依动态路由和静态路由相关介绍_静态路由较之动态路由有哪两项优点?

ruisui883个月前 (02-13)技术分析12

静态路由和动态路由各有其优势和适用场景:

静态路由适用于路由规则不经常变化的场景,如登录页、404、等通用页面。

动态路由适用于需要根据用户权限或其他条件动态生成路由规则的场景,如权限管理系统。

1. 静态路由

静态路由是指在路由配置阶段就确定好的路由规则,它们的路径和组件都是在编译时确定的,并且不需要动态判断权限的路由,如登录页、404、等通用页面。在若依Vue中,静态路由通过@/router/index.js文件配置。

静态路由的特点包括:

路由规则在应用启动时就已确定,不会发生变化。

路由的路径和对应的组件是一一对应的,每个路径都有固定的组件渲染。

静态路由的配置示例:

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
];

若依中的代码示例:

动态路由

动态路由是指在运行时根据某些条件动态添加或修改的路由规则,需要根据用户动态判断权限并通过addRoutes动态添加的页面,在@
/store/modules/permission.js加载后端接口路由配置。在若依Vue中,可以通过动态路由实现权限管理和菜单配置等功能

动态路由的特点包括:

路由规则可以根据需要进行添加、修改或删除。

路由的路径和对应的组件可以根据条件动态确定,使应用更加灵活。

动态路由的配置示例:

// 添加动态路由
router.addRoutes([
  {
    path: '/user',
    component: () => import('@/views/User.vue')
  }
]);
 
// 删除动态路由
router.removeRoute('/user');

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1923.html

标签: vue路由权限
分享给朋友:

“若依动态路由和静态路由相关介绍_静态路由较之动态路由有哪两项优点?” 的相关文章

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

Python 幕后:Python导入import的工作原理

更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python 最容易被误解的方面其中之一是import。Python 导入系统不仅看起来很复杂。因此,即使文档非常好,它也不能让您全面了解正在发生的事情。唯一方法是研究 Python 执行 import 语句时幕后发生的事情。注意:在这篇文...

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

VUE 技术栈

官网链接:https://cn.vuejs.org/什么是vue:渐进式JavaScript 框架vue-cli链接:https://cli.vuejs.org/vue-cli安装:npm install -g @vue/clivue -V创建一个项目:vue create xxxxxx模版语法:文...