知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
vue-router权限控制
路由元信息(meta)+全局导航守卫
1
router
.
beforeEach
((
to
,
from
,
next
)
=>
{
2
if
(
to
.
meta
.
roles
.
includes
(
role
)){
3
next
()
//放行
4
}
esle
{
5
next
({
path
:
"/404"
})
//跳到404页面
6
}
7
})
Copied!
动态添加路由控制
vue-router
提供了
addRoutes()
方法,可以动态注册路由,
需要注意的是,动态添加路由是在路由表中
push
路由,由于路由是按顺序匹配的,因此需要将诸如404页面这样的路由放在动态添加的最后。
填坑
vue-router并没有删除路由的api, 这在某些需要删除的场景下会出现问题。可以这样尝试重置vue-router配置
1
// 定义一个函数来创建router
2
export
const
createRouter
=
routes
=>
new
VueRouter
({
3
mode
:
'history'
,
4
base
:
process
.
env
.
BASE_URL
,
5
routes
6
});
7
8
router
.
match
=
createRouter
(
constantRoutes
).
match
;
Copied!
以前
vue-router原理
下一个
路由懒加载
最近更新
2yr ago
复制链接
内容
路由元信息(meta)+全局导航守卫
动态添加路由控制
填坑