const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由 routes: globalRoutes.concat(mainRoutes) }) router.beforeEach((to, from, next) => { // 添加动态(菜单)路由 // 1. 已经添加 or 全局路由, 直接访问 // 2. 获取菜单列表, 添加并保存本地存储 if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') { next() } else { http({ url: http.adornUrl('/sys/menu/nav'), method: 'get', params: http.adornParams() }).then(({ data }) => { if (data && data.code === 0) { fnAddDynamicMenuRoutes(data.menuList) router.options.isAddDynamicMenuRoutes = true sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]')) sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]')) next({ ...to, replace: true }) } else { sessionStorage.setItem('menuList', '[]') sessionStorage.setItem('permissions', '[]') next() } }).catch((e) => { console.log(`%c${e} 请求菜单列表和权限失败,跳转至登录页!!`, 'color:blue') router.push({ name: 'login' }) }) } })
时间: 2024-04-22 12:25:46 浏览: 29
这段代码是一个Vue Router的配置,主要包括路由配置和路由守卫。在路由配置中,`mode`设置为'hash',表示使用URL的hash来进行路由跳转;`scrollBehavior`函数用于在每次路由切换时滚动到页面的顶部;`isAddDynamicMenuRoutes`用于标记是否已经添加了动态菜单路由;`routes`是一个数组,包含了全局路由和主要路由。
在路由守卫中,`beforeEach`函数会在每次路由切换之前被调用。首先会判断是否已经添加了动态菜单路由或者当前路由为全局路由,如果是,则直接访问该路由;否则,会发送一个HTTP请求获取菜单列表,并将菜单列表添加到路由配置中,并保存在本地存储中。接着,会将`isAddDynamicMenuRoutes`设置为true,表示已经添加了动态菜单路由,并将菜单列表和权限保存在`sessionStorage`中。最后,会调用`next`函数将导航转到目标路由。如果获取菜单列表和权限失败,则会在控制台输出错误信息,并跳转到登录页。
需要注意的是,这段代码中使用了一些自定义的函数和变量,比如`fnCurrentRouteType`用于判断当前路由的类型,`http`用于发送HTTP请求,`fnAddDynamicMenuRoutes`用于添加动态菜单路由。这些函数和变量的实现没有在代码中给出。
相关问题
const router = new VueRouter({ mode: 'hash', /*hash模式改为history*/ routes // (缩写)相当于 routes: routes })
这段代码是创建一个 Vue.js 路由器实例的代码,其中 `mode` 属性被设置为 `'hash'`,表示使用哈希模式的路由。如果要改为使用历史记录模式的路由,需要将该属性设置为 `'history'`。`routes` 是一个数组,包含了应用程序中所有的路由配置。在这里,它被作为 `router` 实例的参数传递进去。这个 `router` 实例可以被挂载到 Vue.js 应用程序的根实例上,以提供路由功能。
export default new VueRouter({ routes, mode:'' })
你在创建一个新的 Vue 路由实例,并设置了一些配置。其中 `routes` 是一个路由配置数组,用来定义应用程序的路由规则。而 `mode` 则是一个字符串,用来设置路由的模式。
请注意,你没有给出 `mode` 的具体取值,所以需要补充上具体的路由模式,可以是 `'hash'`(哈希模式)或者 `'history'`(历史模式)。
下面是一个示例,假设你想使用历史模式:
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
// 定义你的路由规则
];
export default new VueRouter({
routes,
mode: 'history' // 设置为历史模式
});
```
请根据你的需求,选择合适的路由模式。如果你有其他问题或需要进一步的帮助,请随时提问!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)