vue脚手架开发（二）：路由

• 路由安装

npm安装：npm install vue-router

• 路由链接和入口

1、链接：

角色管理

to:是点击此链接需要打开的路由的路径

2、入口：

• 路由的配置

路由的配置是在index.js中完成的，在这里我们可以先看到一个helloworld的路由，最基本的路由配置就是这样。需要用户登录才能访问的路由需配置auth参数，为true则需要进行登录才可以访问。

{
  path: '/org', name: 'Org', component: Org,
  meta: {
    /*标明是否需要登录*/
    auth: true
  }
}

嵌套路由就是在这里路由下还有子路由，使用children属性数组来统计。

嵌套路由配置：

{
  path: '/', name: 'Index', component: Index,
  meta: {
    /*标明是否需要登录*/
    auth: true
  },
  children: [
    {
      path: '/org', name: 'Org', component: Org,
      meta: {
        /*标明是否需要登录*/
        auth: true
      }
    },

   ]

}

路由全局钩子使用的方法来进行过滤一般，在进入这个路由时进行过滤：

判断当前用户是否已经登录，如果登录则通过，否则跳转至登录的路由。
/**
 * 路由全局钩子设置访问权限
 */
router.beforeEach(function (to, from, next) {
  //权限管理判断
  if (to.meta.auth) {
    //获取登录状态
    let userLoginStatus = store.state.userLoginStatus;
    //如果已经登录
    if (userLoginStatus == 'true') {
      next();
    } else {//如果没有登录，则跳转至登录界面
      next({
        path: '/login',
        query: {lastVisitPath: to.fullPath}//把要跳转的地址作为参数传到下一步
      });
    }
  } else {
    //通过
    next();
  }
});