1.jpg

开篇

已经有好些日子没有更新了，其实博主只是在博客里更新，部分文章已经从简书搬到了博客，但这篇文章可能是博主在简书的最后一篇文章了，离开简书的原因。

正文

最近在学习vue，这也是iOSer入门前端的最小白的框架。使用也很简单，入门的成本最低。Vue一些基础的用法，官方文档已经很写得很明白了，就是在使用router的时候，踏了不少坑，现在把一些坑记录下来。vue的安装就不说了，不明白的看这里。

例子

main.js文件

import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueBlu from 'vue-blu';
import 'vue-blu/dist/css/vue-blu.min.css';
import '../static/reset.css'; // 全局自定义样式

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueBlu);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

router

import Vue from 'vue';
import Router from 'vue-router';
import Info from '@/components/Info';
import Home from '@/components/Home';
import HelloWorld from '@/components/HelloWorld';
import VideoView from '@/components/VideoView';

Vue.use(Router);

export default new Router({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      component: Home,
      children: [{
        path: 'helloworld',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path: 'info',
        name: 'Info',
        component: Info
      },
      {
        path: '/',
        name: 'VideoView',
        component: VideoView
      }]
    }
  ]
});

home.vue

helloworld.vue

<template>
<div class="hello">
  hello
</div>
</template>
<script type="text/ecmascript-6">
export default {

};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.hello
  position: relative
  top: 10px
  width: 100%
  height: 100px
  background: red
</style>

其实是把上面的代码替换到<router-view></router-view>地方，效果就像第一张截图一样。这里还有个要注意的地方，上面的路由是Home的path是\,VideoView的path也是\，就是默认要显示VideoView内容。

登录问题

下面来说第二个需求，当用户登录一个界面的时候，需要用户账号与token，但是用户输入的路径不是登录的路径，这时，我们需要判断如果有用户账号与token就让在界面的界面，如果没有用户账号与token，或者token过期，就让跳转到登录界面，让用户登录。这里就需要一个全局的导航守卫来解决这个问题了。

router

import Vue from 'vue';
import Router from 'vue-router';
import Info from '@/components/Info';
import Home from '@/components/Home';
import Login from '@/components/Login';
import VideoView from '@/components/VideoView';

Vue.use(Router);

const router = new Router({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        keepAlive: false, /* 用于在 <keep-alive> 中使用，判断是否需要进行缓存 */
        auth: false, /* 自定义属性，用于判断是否进行校验,在router.beforeEach中使用 */
        title: '登录' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */
      }
    },
    {
      path: '/home',
      component: Home,
      meta: {
        keepAlive: false, /* 用于在 <keep-alive> 中使用，判断是否需要进行缓存 */
        auth: true, /* 自定义属性，用于判断是否进行校验,在router.beforeEach中使用 */
        title: '首页' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */
      },
      children: [{
        path: 'info',
        name: 'Info',
        component: Info,
        meta: {
          keepAlive: false, /* 用于在 <keep-alive> 中使用，判断是否需要进行缓存 */
          auth: true, /* 自定义属性，用于判断是否进行校验,在router.beforeEach中使用 */
          title: '个人中心' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */
        }
      },
      {
        path: '/home',
        name: 'VideoView',
        component: VideoView,
        meta: {
          keepAlive: true, /* 用于在 <keep-alive> 中使用，判断是否需要进行缓存 */
          auth: true, /* 自定义属性，用于判断是否进行校验,在router.beforeEach中使用 */
          title: '首页' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */
        }
      }]
    }
  ]
});

// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否需要校验
  if (to.matched.some(m => m.meta.auth)) {
    const model = loadFromLocal(null, 'logining', false);
    if (model.token) {
      next();// 校验通过，正常跳转到你设置好的页面
    } else {
      next({// 校验失败，跳转至登录界面
        path: '/login',
        query: {
          redirect: to.fullPath
        }// 将跳转的路由path作为参数，用于在登录成功后获取并跳转到该路径
      });
    }
  } else {
    next();// 不需要校验，直接跳转
  }
});

export default router;

在配置路由是，可以配置meta里的auth参数来判断是否需要进入登录界面，这里也可以用来判断进入其他界面，这里就不做展开了。
PS：有不明白的童鞋可以在下面留言或私信博主，博主会不定期回复。