vue實現三級頁面跳轉功能

Posted on by

問題描述：在二級頁面點擊按鈕，打開新的標簽頁

實現：

在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')

推薦閱讀：