【Hello VUE】暴學VUE之代碼講解（九）

時間快過去一個月了，博主比較懶惰，現在開始繼續更新吧。這一章主要講解vue-router路由功能。

什麼是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

1. 嵌套的路由/視圖表
2. 模塊化的、基於組件的路由配置
3. 路由參數、查詢、通配符
4. 基於 Vue.js 過渡系統的視圖過渡效果
5. 細粒度的導航控制
6. 帶有自動激活的 CSS class 的鏈接
7. HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
8. 自定義的滾動條行爲

推薦更加專業的講解：https://router.vuejs.org/zh/

@/router/index.js源碼

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home.vue'
import Login from '@/views/login/Login.vue'

Vue.use(Router)

// 登錄頁面單獨寫，如下
export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登錄'
  },
  component: Login
}

export const appRouter = {
  path: '/',
  name: 'home',
  redirect: '/login',
  component: Home,
  children: [
    {
      path: '/home',
      title: '首頁',
      name: 'dashboard',
      component: () => import('@/views/Index.vue')
    },
    //用戶管理
    {
      path: 'user/list',
      title: '用戶列表',
      name: 'userList',
      component: () => import('@/views/user/UserList.vue')
    },
    {
      path: 'user/info',
      title: '用戶信息',
      name: 'userInfo',
      component: () => import('@/views/user/UserInfo.vue')
    },
    //example
    {
      path: 'example/table',
      title: 'TABLE',
      name: 'exampleTable',
      component: () => import('@/views/example/table.vue')
    },
    {
      path: 'example/form',
      title: 'FORM',
      name: 'exampleForm',
      component: () => import('@/views/example/form.vue')
    }

  ]
};

export default new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [loginRouter, appRouter]
})

@/router/index.js源碼分析

import

import Vue from ‘vue’
import Router from ‘vue-router’
若只給出vue，axios， vue-router 這樣的包名，則會自動到node_modules中加載

import Home from ‘@/views/Home.vue’
import Login from ‘@/views/login/Login.vue’
定義變量Home，Home就代表@/views/Home.vue

Vue.use(Router)

告訴vue編譯器，老子要使用路由了，具體的怎麼定義，怎麼初始化，要看下面的new Router

export

export const loginRouter = {
path: ‘/login’,
name: ‘login’,
meta: {
title: ‘Login - 登錄’
},
component: Login
}
定義一個登錄頁面的路由，單獨寫。爲啥要單獨寫呢，一般來說登錄頁面都是不需要session信息檢查的，也就是登錄信息檢查
其中一些定義是
path，這個很重要，所有代碼都是直接引用的。例如：next({path:’/login’}); 轉向到/login頁面
name，定義一個名稱
meta，定義一些附加信息
component，這個很重要，這個是path所具體的頁面信息

export const appRouter = {
path: ‘/’,
name: ‘home’,
redirect: ‘/login’,
component: Home,
children: [
{
path: ‘/home’,
title: ‘首頁’,
name: ‘dashboard’,
component: () => import(’@/views/Index.vue’)
},
… …
};
定義一個應用路由，這裏面的路由信息都是登錄後才能訪問的。首先定義的是根路由"/"，默認讓他訪問登錄後的首頁，首頁會有檢查登錄權限的信息，發現沒有登錄的話，就會直接調整到登錄頁面 redirect: ‘/login’。定義根路由後，其他的頁面都是根路由的子信息，都包含在children: [… …]集合裏面。

new router

export default new Router({
mode: ‘history’,
linkActiveClass: ‘active’,
routes: [loginRouter, appRouter]
})
定義new router，並且把new router提供出去，供vue編譯器進行調用。值得注意的是，routers節點放置的router的數組。這樣定義使得代碼更加清晰。