# vue-router权限控制

### 路由元信息(meta)+全局导航守卫

```javascript
router.beforeEach((to,from,next)=>{
	if(to.meta.roles.includes(role)){
		next()	//放行
	}esle{
		next({path:"/404"})	//跳到404页面
	}
})
```

## 动态添加路由控制

`vue-router`提供了`addRoutes()`方法，可以动态注册路由，**需要注意的是，动态添加路由是在路由表中`push`路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。**

### 填坑

vue-router并没有删除路由的api, 这在某些需要删除的场景下会出现问题。可以这样尝试重置vue-router配置

```javascript
// 定义一个函数来创建router
export const createRouter = routes => new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.match = createRouter(constantRoutes).match;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/framework/vue-1/vuerouter-quan-xian-kong-zhi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.