权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。
跟着我一起来学vue实战篇路由管理权限吧!
getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据
check()函数用于权限的校验匹配
isLogin()函数用于检验用户是否登录
路由配置元信息meta:{ authority: ["admin"] }
使用tomatched获取跳转路由的全部信息,包括父路由和子路由
使用lodash中的findLast匹配离跳转路由配置权限的元信息
引入authjs中check()和isLogin()进行判断是否具有权限或是否已登录
如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面
运行结果
当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单；
如返回值为user时，菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单
接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1新闻列表页模板
<template id="news">
<div>
<h2>新闻列表</h2>
<ul>
<li>
<router-link to="/news/001">新闻001</router-link>
</li>
<li>
<router-link to="/news/002">新闻002</router-link>
</li>
</ul>
</div>
</template>1234567891011121312345678910111213
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2新闻详细页组件准备
<template id="NewsDetail">
<div>
新闻详细页面
<span>{{$routeparamsid}}</span>
</div>
</template>123456123456
$routeparamsid获取路由上的参数
在js里定义路由组件：
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };1212
3定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },11
访问/news/001或者/news/002就展示新闻详细页
4全部代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src=">
Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：
注意：
以上传参方式基本上可以理解为ajax中的post请求方式，参数都是不可见的，但是该方法有一个弊端，就是当页面刷新后参数值会丢失！！！
以上两种方式是可以解决页面刷新参数消失问题的，query这种方式可以理解为是ajax中的get方法，参数是直接在url后面添加的，参数是可见的。
vueconfigjs 是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用moduleexport导出，格式如下图。
@符号代表src资源目录，在vueconfigjs文件中将路径解析，pathresolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。
1路由模式
2路由元信息
meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据
3路由守卫
在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user
其次，在 routerbeforeEach 及 routerAfterEach 中可以配置信息
routerbeforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next
routerAfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from
浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面
安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）
导入：
首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示
然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入
然后在一级路由页面onevue中写入二级路由页面的router-link导航和router-view
最终效果如下图所示
路由配置：
: 号后面接参数名（动态路径名）
配置好路由后， /login/12 或 /login/hyh 都能访问到Login页面。
获取传参：
$routeparams参数名
路由组件传参：
在路由配置里，设置 props: true
组件：
query传参
路径将会解析成： /loginid=123 ，类似Get请求。
使用 children 给路径添加子路径。形成嵌套路由，父路由可以只渲染一个 router-view ，但必须有一个 router-view ，子路由将渲染在父路由的 router-view 里。
父路由可以为单独的router-view:
历史:
可以将一个路径地址重定向另一个地址：
访问根目录将会跳转到主页（home），404页面就是靠重定向做的：
设置name属性，可以在router-link内使用name代替path
导航守卫就是一个路径跳转的监听过滤器。
第三个参数next
每一个 next 都是会严格执行的，只要守卫函数内还有 next ，就会依次执行。
可以在路由上添加 meta 字段：
获取meta值：
按需加载、动态导入
<router-view /> 存放页面
路由匹配到的组件将会渲染到Appvue里的<router-view />
那么这个Appvue里应该这样写：
切换路由<router-link>
src/router/mainjs
this$routeparamsid ----------// 获取名称为id的参数（$route不带r）
rem 布局
1 拷贝flexminjs 文件到项目目录
2 src/mainjs 导入 import “xxxflexibleminjs”
3 在flexibleminjs修改设计宽度
4 修改css单位 100px = 1rem;
router-link-active
全局配置 <router-link> 默认的激活的 class
router-link-exact-active
全局配置 <router-link> 默认的精确激活的 class
导入Cookie
import Cookie from '/assets/js/Cookie'
使用Cookie
CookiesetCookie("uname","mumu");
CookiedelCookie("uname");
thisuname = CookiegetCookie("uname");
守卫 三个参数
src/router/mainjs添加
Cart购物车页面
给路由配置额外的信息
{
path:"/cart",
meta:{requireAuth:true}
}
$routemetarequireAuth 获取
mainjs里边引入css或者自己写
通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
/ webpackChunkName: "about" /
魔法注释 ：指的是吧路由分割为一个单独的js文件名称是about
让css只在当前组件中起作用
通过/index/info就可以访问到info组件了
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/dataid=1 /dataid=2 这里的 id 叫 query
当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
这句话怎么理解呢？看下边：
如果你要使用params传参，那么你的路由页面indexjs必须带上参数，如下
如果你要使用query传参，那么你的路由页面indexjs必须带上参数，如下
这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。
要是想获取参数值：各自的获取方法是：
query和params分别是：this routeparamsid
顺便说一些参数是多个的情况
params传参，如果路由indexjs如下：
那么跳转写法：this$routerpush({name:'detail',params:{id:123,name:'lisi'}})
效果： >
以上就是关于Vue实战篇｜使用路由管理用户权限（动态路由）全部的内容，包括:Vue实战篇｜使用路由管理用户权限（动态路由）、vue-router怎么给子路由传参、vue路由传参及解决vue路由传参页面刷新参数丢失问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）