vue路由之间传递数据有哪些方式

阅读:0 来源: 发表时间:2023-02-12 09:26

本篇文章给大家谈谈vue根据数据创建路由,以及vue路由之间传递数据有哪些方式对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

1、vue 动态路由/路由权限 解决方案

2、vue.js-2.0路由怎么用?路由怎么配置

3、vue项目 动态路由怎么做

4、Vue实现动态路由

vue 动态路由/路由权限 解决方案

路由权限思路:

1.菜单栏/导航栏(一级权限)

在登录成功后,获取后端的权限数据, 根据权限数据,展示对应的路由导航或菜单即可;

2.界面的控制

如果用户没有登录, 用户手动在地址栏输入路由地址,则需要跳转到登录界面.

如果用户已经登录, 用户手动输入的非权限内的路由地址,则给他跳转到404界面.

3.按钮的控制(二级权限)

页面中,有些账号有: 添加,删除,修改,增加等权限, 有些没有.

没有权限的账号在这个页面只是可以浏览页面中的数据,需要对这些按钮 禁用or隐藏。

4.请求和响应的控制 (这一步其实后端也会根据token判断身份信息, 来返回数据,可以省略)

如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1,这些按钮就可以使用了,此时需要对按钮点击后发出的请求作出拦截.

login.vue

home.vue (elment-ui)

侧边导航栏

store.js

router.js

动态路需两个地方调用:

1 login.vue 中登录成功后立即执行动态路由函数

2 app.vue中, 在根组件中添加执行动态路由函数,这样每一次用户刷新,就会执行,否则刷新之后,动态路由就没了

思路3:按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。

简单直接的方式,直接就在html中对button添加v-if显示隐藏即可

import './utils/permission.js' -- main.js中引入文件, 嫌麻烦直接在main.js中写

4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录

vue.js-2.0路由怎么用?路由怎么配置

方法/步骤

首先,先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候,会提示你安装否。选择n就行了。也就是no。见下图!如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。

首先第一步,在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2

接下来,我们就开始配置路由了。首先说几个准备思路吧。第一:页面打开后是要有默认显示页的(默认的路由),第二,同时实现路由切换时像JStab切换效果。接下来,我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。(在这之前请把hello.vue的内容清空,才能看到现面第二张图的效果)

现在基本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.

到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后,router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二,第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了,而且内容也变了。说明路由成功。

最后给路由的导航加上像JS一样的tab切换效果。用到VUE路由中自有的类。router-link-active.意思是在路由激活时更变的class.看图。在style中写好css.页面上就可以看到默认显示的路由组件导航就有class了。不过此时,你已经成功了一半了。因为请看下面第三张图片。当点击router2的时候,出现了两个红色字体。这下尴尬了。

上面有小问题,将会在下一篇分享“嵌套路由-子路由”中给大家解决。如果有性子比较急的请私信我。或者看我简介联系我。喜欢记得投票收藏哦。后续会分享更多关于vue.js组件化开发框架的应用。谢谢大家。

vue路由之间传递数据有哪些方式

vue项目 动态路由怎么做

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)

详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点,效果都能实现,我们公司是通过第二中种方法实现的,原因就是公司项目里有一个专门的用户中心,里边逻辑很复杂,不好返给前端用户权限,担心路由放到前端不安全(以上的话是公司的后台同学讲的),那好吧,抱着都试试、锻炼下自己能力的态度,我们搞了第二种方法。

大体步骤:拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次,其余都从本地取,所以用户,只有退出在登录路由才会更新)

菜单名字menName;

菜单路径menPath;

菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后,

menName --- name

menPath --- path

menuUrl ----components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式,转为组件文件

生成路由表

可以再过滤一遍生成的路由表

下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时,将该路由的path变为/404

getRouter.push({ path: '*', redirect: '/404', hidden: true });

router.addRoutes(getRouter); //动态添加路由

前置工作:配置项目路由文件,该文件中没有路由,或者存在一部分公共路由,即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列,右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字,以及路由对应的icon;

因为可能会有多级菜单,所以会出现children下边嵌套children的情况;

路由是数组格式

实际前端需要的 component是 component: () = import('@/views/content/classify'),

因为有多级路由的出现,所以要写成遍历递归方法,确保把每个component转成组件对象

因为后台传回的是字符串,所以要把加载组件的过程 封装成一个方法,用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件

Layout我放的目录跟其他文件的目录不一样,所以我在遍历里单独处理,各位小伙伴可自己调整哈

beforeEach路由拦截,进入判断,如果发现本地没有路由数据,那就利用axios后台取一次,取完以后,利用localStorage存储起来,利用addRoutes动态添加路由,

ps:beforeEach好坏啊,一步小心就进入到了他的死循环,浏览器都tm崩了,得在一开始就加判断,拿到路由了,就直接next(),嘤嘤嘤

global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值,这是一个全局变量(可以用vuex替代),菜单那边拿到路由,进行渲染

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 :

(1)、简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用

到这里,整个动态路由就可以走通了,但是页面跳转、路由守卫处理是异步的,会存在动态路由添加后跳转的是空白页面,这是因为路由在执行next()时,router里面的数据还不存在,此时,你可以通过window.location.reload()来刷新路由

后端返回的路由格式:

注意: vue是单页面应用程序,所以页面一刷新数据部分数据也会跟着丢失,所以我们需要将store中的数据存储到本地,才能保证路由不丢失。关于vue页面刷新保存页面状态,可以查看 vue如何在页面刷新时保留状态信息

关于vue根据数据创建路由和vue路由之间传递数据有哪些方式的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

    声明

    删帖请联系zhiyihome@qq.com;