Vue中导航切换后自动跳转导航下首个页面并进行高亮显示

1.显示效果如下

2.问题原因

       在进行学习过程中注意到很多网站都会在进行头部导航时会自动的进行该导航下的首个页面的跳转并将该页面所在的导航展开，但是在我们使用的UI组件中并没有可以直接实现该功能的属性或方法于是我就对该功能进行了一个简单的实现。

3.实现思路

（1）后端的数据处理

        在这里我是通过在Vue项目中通过安装和导入element-ui组件库进行的实现。在这之前首先需要搭建一个三级路由的数据库或在一个json文件中对我们导航所需要的数据进行一个实现。

这里我通过node.js和express实现的后端和数据库来进行数据的模仿。具体数据表的搭建如下：

//权限表
const menuSchema=new mongoose.Schema({
    name:String,
    url:String,
    level:Number,
    pid:{
        type:mongoose.Types.ObjectId,
        ref:"menu"
    }
})

这里定义了一个自关联的数据表以方便我们对权限路由数据进行处理。

进行完三级路由的测试数据添加后我们需要搭建前端请求数据的接口，并在接口中对数据进行一个关联处理。具体接口代码如下：

//所有权限获取
router.get("/all_menu",async (req,res)=>{
  let all_menu=await menumodel.find().lean()
  let obj={}
  all_menu.forEach((item)=>{  
    obj[item._id]=item
  })
  let list=[]
  all_menu.forEach((item)=>{
      if(!item["pid"]){
        list.push(item)
      }else{
        if(!obj[item.pid]["children"]){
          obj[item.pid]["children"]=[]
        }
        obj[item.pid]["children"].push(item)
      }
    })
  res.send({
    msg:"权限获取成功",
    code:200,
    list
  })
})

这样我们前端就可以得到一个自关联的权限导航数据。

（2）前端的页面展示

        前端我们需要在先对头部导航进行实现：

这个我们只需要对我们从后端获取到的数据中的一级导航进行一个循环渲染就可以了。

对于左侧导航的实现我们需要通过我们当前选中的头部导航进行获取并渲染到页面中，当全部导航渲染完成后我们就要开始对今天所要实现的功能进行分析了。首先我们需要了解在我们使用的element-ui中的导航菜单的模块中有

以上这个属性这个属性可以控制当前激活路由的一个高亮显示。在使用这个之前我们需要通过router进入vue-router模式。

进行首个页面获取是这个功能实现是最主要问题。这里我通过回调函数方式定义了一个自调用的回调函数通过对当前数据对象是否存在children属性来判断其是否是最底层的第一个页面具体函数如下：

huidiao(now, key) {//当前一级路由下的children数组当作参数传入，并将当前一级路由的路径作为第二个参数传入回调函数
      //回调函数 用于生成{一级路由的路径：该路由下最底层的第一个页面路径}的数据格式
  if (now[0].children) {
    //判断当前数组中第一个对象是否还有children的属性
    //存在就进行自身的回调并将当前数组的第一个对象的children的值当作第一个参数参数传入
    this.huidiao(now[0].children, key); 
  } else {
  //如果不存在children属性就以key为键名，当前数组的第一个对象的url路径为键值添加到自定义的空对象中
    this.allzhankai[key] = now[0].url;
  }
},

 通过以上函数我们可以获取到一个对象其键名为当前的一级导航，键值为当前一级导航下的首个页面的路由。之后我们就可以根据该对象进行判断获取当前对象下的首个页面的路由进行页面跳转和高亮显示了。

这里需要注意在进行页面路由获取时不能使用计算属性，因为计算属性只会调用一次，并将值存入缓存中，对于需要多次调用的不能写入到计算属性中。

结语

以上就是我对该项效果的一个实现流程，其中有很多不足的地方如：未进行导航展开的一个动态效果，对于没有二级导航的一级导航会因无法循环渲染左侧导航而产生报错等。随着不断的学习我会对其进行不断的完善。