1.jpg

開(kāi)篇

已經(jīng)有好些日子沒(méi)有更新了，其實(shí)博主只是在博客里更新，部分文章已經(jīng)從簡(jiǎn)書(shū)搬到了博客，但這篇文章可能是博主在簡(jiǎn)書(shū)的最后一篇文章了，離開(kāi)簡(jiǎn)書(shū)的原因。

正文

最近在學(xué)習(xí)vue，這也是iOSer入門前端的最小白的框架。使用也很簡(jiǎn)單，入門的成本最低。Vue一些基礎(chǔ)的用法，官方文檔已經(jīng)很寫(xiě)得很明白了，就是在使用router的時(shí)候，踏了不少坑，現(xiàn)在把一些坑記錄下來(lái)。vue的安裝就不說(shuō)了，不明白的看這里。

例子

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>

其實(shí)是把上面的代碼替換到<router-view></router-view>地方，效果就像第一張截圖一樣。這里還有個(gè)要注意的地方，上面的路由是Home的path是\,VideoView的path也是\，就是默認(rèn)要顯示VideoView內(nèi)容。

登錄問(wèn)題

下面來(lái)說(shuō)第二個(gè)需求，當(dāng)用戶登錄一個(gè)界面的時(shí)候，需要用戶賬號(hào)與token，但是用戶輸入的路徑不是登錄的路徑，這時(shí)，我們需要判斷如果有用戶賬號(hào)與token就讓在界面的界面，如果沒(méi)有用戶賬號(hào)與token，或者token過(guò)期，就讓跳轉(zhuǎn)到登錄界面，讓用戶登錄。這里就需要一個(gè)全局的導(dǎo)航守衛(wèi)來(lái)解決這個(gè)問(wèn)題了。

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> 中使用，判斷是否需要進(jìn)行緩存 */
        auth: false, /* 自定義屬性，用于判斷是否進(jìn)行校驗(yàn),在router.beforeEach中使用 */
        title: '登錄' /* 可以通過(guò)$route.meta.title 后取當(dāng)前的描述信息、菜單信息 */
      }
    },
    {
      path: '/home',
      component: Home,
      meta: {
        keepAlive: false, /* 用于在 <keep-alive> 中使用，判斷是否需要進(jìn)行緩存 */
        auth: true, /* 自定義屬性，用于判斷是否進(jìn)行校驗(yàn),在router.beforeEach中使用 */
        title: '首頁(yè)' /* 可以通過(guò)$route.meta.title 后取當(dāng)前的描述信息、菜單信息 */
      },
      children: [{
        path: 'info',
        name: 'Info',
        component: Info,
        meta: {
          keepAlive: false, /* 用于在 <keep-alive> 中使用，判斷是否需要進(jìn)行緩存 */
          auth: true, /* 自定義屬性，用于判斷是否進(jìn)行校驗(yàn),在router.beforeEach中使用 */
          title: '個(gè)人中心' /* 可以通過(guò)$route.meta.title 后取當(dāng)前的描述信息、菜單信息 */
        }
      },
      {
        path: '/home',
        name: 'VideoView',
        component: VideoView,
        meta: {
          keepAlive: true, /* 用于在 <keep-alive> 中使用，判斷是否需要進(jìn)行緩存 */
          auth: true, /* 自定義屬性，用于判斷是否進(jìn)行校驗(yàn),在router.beforeEach中使用 */
          title: '首頁(yè)' /* 可以通過(guò)$route.meta.title 后取當(dāng)前的描述信息、菜單信息 */
        }
      }]
    }
  ]
});

// 注冊(cè)一個(gè)全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  // 判斷是否需要校驗(yàn)
  if (to.matched.some(m => m.meta.auth)) {
    const model = loadFromLocal(null, 'logining', false);
    if (model.token) {
      next();// 校驗(yàn)通過(guò)，正常跳轉(zhuǎn)到你設(shè)置好的頁(yè)面
    } else {
      next({// 校驗(yàn)失敗，跳轉(zhuǎn)至登錄界面
        path: '/login',
        query: {
          redirect: to.fullPath
        }// 將跳轉(zhuǎn)的路由path作為參數(shù)，用于在登錄成功后獲取并跳轉(zhuǎn)到該路徑
      });
    }
  } else {
    next();// 不需要校驗(yàn)，直接跳轉(zhuǎn)
  }
});

export default router;

在配置路由是，可以配置meta里的auth參數(shù)來(lái)判斷是否需要進(jìn)入登錄界面，這里也可以用來(lái)判斷進(jìn)入其他界面，這里就不做展開(kāi)了。
PS：有不明白的童鞋可以在下面留言或私信博主，博主會(huì)不定期回復(fù)。