vue实现三级页面跳转功能-前端开发

这篇文章主要介绍了vue实现三级页面跳转功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

问题描述：在二级页面点击按钮，打开新的标签页

实现：

在router目录下的index.js文件添加对应组件

{
    path: '/offices',
    component: <strong>'Layout'</strong><strong>,</strong>
    hidden: true,
    redirect: 'noRedirect',
    permission: 'sys:office:launch',
    meta: { title: '办公管理',roles: ['sys:office'] },
    children: [
      {
        path: '/flows',
        component: <strong>'/office/launch/flows'</strong><strong>,</strong>
        name: 'flows',
        hidden: true,
        meta: { title: '转正', activeMenu: '/office/launch' }
      },
    ]
  }

说明：上述黄色标记部分代码和以外自定义的component不一样，主要原因是自定义路由解析方法所致

修改store目录下permission.js

以下是之前定义的方法，该方法主要是生成从后端返回来的对应菜单的路由信息

export function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      // 获取组件
      const component = tmp.component
      // 判断该路由使用组件
      if(route.component){
        // 判断是否是根组件
        if(component === 'Layout'){
          tmp.component = Layout
          tmp.redirect = 'noRedirect'
        }else{
          // 获取对应的具体组件信息
          tmp.component = (resolve) => require([`@/views${component}`],resolve)
        }
      }
      // 判断是否有子菜单
      if(tmp.children){
        const child = tmp.children
        child.forEach(e => {
          e.path = tmp.path + e.path
        })
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
       res.push(tmp)
    }
  })
  return res
}

const actions = {
  // 动态生成路由
  generateRoutes({ commit }, roles) {
    return new Promise((resolve,reject) => {
      getMenuList().then(res=>{
        let accessedRoutes;//存放对应权限的路由信息
        //如果状态码为200，则表示成功
        if(res.code === 200){
          accessedRoutes = filterAsyncRoutes(res.data, roles)
        }
        //将路由信息保存到store中
        commit("SET_ROUTES",accessedRoutes);
        resolve(accessedRoutes);
      }).catch(error=>{
        reject(error);
      });
    })
  }
}

修改之后的方法

export function filterAsyncRoutes(routes, roles, <strong>type = false</strong>) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      // 获取组件
      const component = tmp.component
      // 判断该路由使用组件
      if(route.component){
        // 判断是否是根组件
        if(component === 'Layout'){
          tmp.component = Layout
          tmp.redirect = 'noRedirect'
        }else{
          // 获取对应的具体组件信息
          tmp.component = (resolve) => require([`@/views${component}`],resolve)
        }
      }
      // 判断是否有子菜单
      if(tmp.children){
        const child = tmp.children
        child.forEach(e => {
          e.path = tmp.path + e.path
        })
        tmp.children = filterAsyncRoutes(tmp.children, roles, false)
      }
      if(type && roles.includes(tmp.permission) || tmp.permission === 'all'){
        res.push(tmp)
      }else if(!type){
        res.push(tmp)
      }
    }
  })
  return res
}

const actions = {
  // 动态生成路由
  generateRoutes({ commit }, roles) {
    return new Promise((resolve,reject) => {
      getMenuList().then(res=>{
        let accessedRoutes;//存放对应权限的路由信息
        //如果状态码为200，则表示成功
        if(res.code === 200){
          accessedRoutes = filterAsyncRoutes(res.data, roles, false)
          // asyncRoutes 该参数就是上面添加的路由信息
          accessedRoutes = accessedRoutes.concat(filterAsyncRoutes(asyncRoutes,roles,true))
        }
        //将路由信息保存到store中
        commit("SET_ROUTES",accessedRoutes);
        resolve(accessedRoutes);
      }).catch(error=>{
        reject(error);
      });
    })
  }
}

黄色部分就是新增部分

修改面包屑和标签名

title: view.query && view.query.metaTitle?view.query.metaTitle:(view.meta.title || 'no-name')

基础教程推荐