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：有不明白的童鞋可以在下面留言或私信博主，博主會不定期回復。