iView的导航、路由、鉴权

导航跳转方式

• iVIew组件中路由跳转类似于view-router，可以直接使用to来进行跳转

  
  
   

  

  使用to进行跳转

• 或者采用编程式导航：

  
  
   

  

  编程式导航跳转

二者区别：
使用to进行跳转，跳转的菜单会变成一个a标签，而使用编程式导航的方式进行跳转，跳转的菜单部分会变为一个li标签。
iView3.0对于菜单操作还增加了对键盘的一个操作，按住ctrl点击路由跳转，会新打开一个页面。

根据当前路由自动选择对应菜单

动态获取当前路由的值，并通过它来设置对应菜单高亮

 

active-name等于菜单项的name时，高亮

在路由级别对页面做鉴权

通过路由守卫来设置在路由级别的鉴权，当路由进行跳转的时候，拦截并判断并执行业务，之后再决定是否跳转

• 设置路由守卫，设置路由的meta信息（这里我们给登录页面不进行鉴权，不设置meta信息，给admin设置鉴权）

  
  
   

  

  路由设置meta信息用以鉴权
  
  
   

  

  我们先把设置的meta信息打印出来看看
  
  
   

  

  登录不鉴权未打印出任何东西，admin则打印出了我们设置的meta

• 因此，我们判断meta中的信息，将路由拦截后进行处理（这里假设我们把登录信息存储在localStorage中）

  
  
   

  

  进入admin，先鉴权，未登录则跳转登录

根据不同平台动态路由不同组件

即使现在移动端已经做了很不错的响应式，但任然存在一些问题达不到我们想要的效果。因此我们可以通过不修改路由的方式来切换不同的页面以应对多端访问。在路由级别动态的渲染不同页面。

• 我们首先需要通过api判断当前的访问平台

  
  
   

  

  判断访问端类型，若为移动端就修改path变量

• 在路由路径上进行一个动态的修改

  
  
   

  

  path的值会根据访问的设备进行动态的修改
• 我们再创建一个mobile的路径，里面存放移动端的页面。这样就可以在路由级别做到多端多页面的展示。