第一個 vue-router 路由

路由，其實就是指向的意思美莫，當(dāng)我點擊頁面上的home按鈕時倍踪，頁面中就要顯示home的內(nèi)容，如果點擊頁面上的about 按鈕笛厦，頁面中就要顯示about 的內(nèi)容纳鼎。Home按鈕 => home 內(nèi)容， about按鈕 => about 內(nèi)容裳凸，也可以說是一種映射. 所以在頁面上有兩個部分贱鄙，一個是點擊部分，一個是點擊之后姨谷，顯示內(nèi)容的部分逗宁。

使用 Vue.js 做項目的時候，一個頁面是由多個組件構(gòu)成的梦湘，所以在跳轉(zhuǎn)頁面的時候瞎颗，并不適合用傳統(tǒng)的 href，于是 vue-router 應(yīng)運而生捌议。
其本質(zhì)就是:建立并管理url和對應(yīng)組件之間的映射關(guān)系.

路由中有三個基本的概念 route, routes, router

• 1哼拔， route，它是一條路由禁灼，由這個英文單詞也可以看出來管挟，它是單數(shù)轿曙， Home按鈕 => home內(nèi)容弄捕， 這是一條route, about按鈕 => about 內(nèi)容， 這是另一條路由导帝。
• 2守谓， routes 是一組路由，把上面的每一條路由組合起來您单，形成一個數(shù)組斋荞。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}
• 3虐秦， router 是一個機制平酿，相當(dāng)于一個管理者凤优，它來管理路由。因為routes 只是定義了一組路由蜈彼，它放在哪里是靜止的筑辨，當(dāng)真正來了請求，怎么辦幸逆？ 就是當(dāng)用戶點擊home 按鈕的時候棍辕，怎么辦？這時router 就起作用了还绘，它到routes 中去查找楚昭，去找到對應(yīng)的 home 內(nèi)容，所以頁面中就顯示了 home 內(nèi)容拍顷。
  客戶端中的路由抚太，實際上就是dom 元素的顯示和隱藏。當(dāng)頁面中顯示home 內(nèi)容的時候昔案，about 中的內(nèi)容全部隱藏凭舶，反之也是一樣“担客戶端路由有兩種實現(xiàn)方式：基于hash 和基于html5 history api.

Vue Router 是 Vue.js 官方的路由管理器帅霜。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌呼伸。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的身冀、基于組件的路由配置
• 路由參數(shù)、查詢括享、通配符
• 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
• 細粒度的導(dǎo)航控制
• 帶有自動激活的 CSS class 的鏈接
• HTML5 歷史模式或 hash 模式搂根，在 IE9 中自動降級
• 自定義的滾動條行為

安裝

vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的铃辖。打開命令行工具剩愧，進入你的項目目錄，輸入下面命令娇斩。

npm install vue-router --save-dev

如果在一個模塊化工程中使用它仁卷，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

使用

以下案例在 vue-cli 項目中使用 vue-router

創(chuàng)建組件頁面

創(chuàng)建一個名為 src/components 的目錄專門放置我們開發(fā)的 Vue 組件，在 src/components 目錄下創(chuàng)建一個名為 Content.vue 的組件犬第，代碼如下：

<template>
    <div>
      我是內(nèi)容頁
    </div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

路由映射

創(chuàng)建一個名為 src/router 的目錄專門放置我們的路由配置代碼锦积，在 src/router 目錄下創(chuàng)建一個名為 index.js 路由配置文件，代碼如下：

import Vue from 'vue'
// 導(dǎo)入路由插件
import Router from 'vue-router'
// 導(dǎo)入上面定義的組件
import Content from '@/components/Content'

// 安裝路由
Vue.use(Router);

// 配置路由
export default new Router({
  routes: [
    {
      // 路由路徑
      path: '/content',
      // 路由名稱
      name: 'Content',
      // 跳轉(zhuǎn)到組件
      component: Content
    }
  ]
});

激活路由

修改 main.js 入口文件歉嗓，增加配置路由的相關(guān)代碼

import Vue from 'vue'
import App from './App'
// 導(dǎo)入上面創(chuàng)建的路由配置目錄
import router from './router'

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  // 配置路由
  router,
  components: { App },
  template: '<App/>'
});

使用路由

修改 App.vue 組件丰介，代碼如下：

<template>
  <div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/content">內(nèi)容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

說明：

• router-link： 默認(rèn)會被渲染成一個 <a> 標(biāo)簽，to 屬性為指定鏈接
  router-link組件來導(dǎo)航, 用戶點擊后切換到相關(guān)視圖.
• router-view： 用于渲染路由匹配到的組件
  router-view組件來設(shè)置切換的視圖在哪里渲染.(一個頁面也可以有多個router-view分別展示特定的視圖,并且支持嵌套)

效果演示

image

第一個 Vue 工程項目

從本章節(jié)開始，我們采用實戰(zhàn)教學(xué)模式并結(jié)合 ElementUI 組件庫哮幢，將所需知識點應(yīng)用到實際中带膀，以最快速度帶領(lǐng)大家掌握 Vue 的使用

創(chuàng)建工程

使用 NPM 安裝相關(guān)組件依賴時可能會遇到權(quán)限問題，此時使用 PowerShell 管理員模式運行即可橙垢；開始菜單 -> 鼠標(biāo)右擊 -> Windows PowerShell (管理員)

image

創(chuàng)建一個名為 hello-vue 的工程

# 使用 webpack 打包工具初始化一個名為 hello-vue 的工程
vue init webpack hello-vue

image

安裝依賴

我們需要安裝 vue-router本砰、element-ui、sass-loader 和 node-sass 四個插件

# 進入工程目錄
cd hello-vue
# 安裝 vue-router
npm install vue-router --save-dev
# 安裝 element-ui
npm i element-ui -S
# 安裝 SASS 加載器
npm install sass-loader node-sass --save-dev

image

# 安裝依賴
npm install

image

啟動工程

npm run dev

image

運行效果

在瀏覽器打開 http://localhost:8080 你會看到如下效果

image

附：NPM 相關(guān)命令說明

• npm install moduleName：安裝模塊到項目目錄下
• npm install -g moduleName：-g 的意思是將模塊安裝到全局钢悲，具體安裝到磁盤哪個位置点额，要看 npm config prefix 的位置
• npm install -save moduleName：--save 的意思是將模塊安裝到項目目錄下，并在 package 文件的 dependencies 節(jié)點寫入依賴莺琳，-S 為該命令的縮寫
• npm install -save-dev moduleName：--save-dev 的意思是將模塊安裝到項目目錄下还棱，并在 package 文件的 devDependencies 節(jié)點寫入依賴，-D 為該命令的縮寫

第一個 ElementUI 頁面 (登錄頁)

目錄結(jié)構(gòu)

在源碼目錄中創(chuàng)建如下結(jié)構(gòu)：

• assets：用于存放資源文件
• components：用于存放 Vue 功能組件
• views：用于存放 Vue 視圖組件
• router：用于存放 vue-router 配置

image

創(chuàng)建視圖

創(chuàng)建首頁視圖

在 views 目錄下創(chuàng)建一個名為 Main.vue 的視圖組件惭等；該組件在當(dāng)前章節(jié)無任何作用珍手，主要用于登錄后展示登錄成功的跳轉(zhuǎn)效果；

<template>
    <div>
      首頁
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

創(chuàng)建登錄頁視圖

在 views 目錄下創(chuàng)建一個名為 Login.vue 的視圖組件辞做，其中 el-* 的元素為 ElementUI 組件琳要；

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="溫馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表單驗證，需要在 el-form-item 元素中增加 prop 屬性
        rules: {
          username: [
            {required: true, message: '賬號不可為空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密碼不可為空', trigger: 'blur'}
          ]
        },

        // 對話框顯示和隱藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 為表單綁定驗證功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定頁面秤茅，該方式稱之為編程式導(dǎo)航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

創(chuàng)建路由

在 router 目錄下創(chuàng)建一個名為 index.js 的 vue-router 路由配置文件

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

import Login from "../views/Login"
import Main from '../views/Main'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登錄頁
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首頁
      path: '/main',
      name: 'Main',
      component: Main
    }
  ]
});

配置路由

修改入口代碼

修改 main.js 入口代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'

// 導(dǎo)入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

// 安裝路由
Vue.use(VueRouter);

// 安裝 ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  // 啟用路由
  router,
  // 啟用 ElementUI
  render: h => h(App)
});

修改 App.vue 組件代碼

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

效果演示

在瀏覽器打開 http://localhost:8080/#/login 你會看到如下效果

image

配置嵌套路由

嵌套路由又稱子路由稚补，在實際應(yīng)用中，通常由多層嵌套的組件組合而成框喳。同樣地课幕，URL 中各段動態(tài)路徑也按某種結(jié)構(gòu)對應(yīng)嵌套的各層組件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

創(chuàng)建嵌套視圖組件

用戶信息組件

在 views/user 目錄下創(chuàng)建一個名為 Profile.vue 的視圖組件五垮；該組件在當(dāng)前章節(jié)無任何作用乍惊，主要用于展示嵌套效果；

<template>
    <div>
      個人信息
    </div>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

用戶列表組件

在 views/user 目錄下創(chuàng)建一個名為 List.vue 的視圖組件放仗；該組件在當(dāng)前章節(jié)無任何作用润绎，主要用于展示嵌套效果；

<template>
    <div>
      用戶列表
    </div>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

配置嵌套路由

修改 router 目錄下的 index.js 路由配置文件诞挨，代碼如下：

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

import Login from "../views/Login"
import Main from '../views/Main'

// 用于嵌套的路由組件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登錄頁
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首頁
      path: '/main',
      name: 'Main',
      component: Main,
      // 配置嵌套路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    }
  ]
});

說明：主要在路由配置中增加了 children 數(shù)組配置莉撇，用于在該組件下設(shè)置嵌套路由

修改首頁視圖

接著上一節(jié)的代碼，我們修改 Main.vue 視圖組件亭姥，此處使用了 ElementUI 布局容器組件稼钩，代碼如下：

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/user/profile">個人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/user/list">用戶列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>內(nèi)容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內(nèi)容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>個人信息</el-dropdown-item>
                <el-dropdown-item>退出登錄</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>Lusifer</span>
          </el-header>

          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

說明：

• 在 <el-main> 元素中配置了 <router-view /> 用于展示嵌套路由
• 主要使用 <router-link to="/user/profile">個人信息</router-link> 展示嵌套路由內(nèi)容

效果演示

image

參數(shù)傳遞

我們經(jīng)常需要把某種模式匹配到的所有路由顾稀，全都映射到同個組件达罗。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶粮揉，都要使用這個組件來渲染巡李。此時我們就需要傳遞參數(shù)了；

使用路徑匹配的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

說明：主要是在 path 屬性中增加了 :id 這樣的占位符

傳遞參數(shù)

router-link

<router-link :to="{name: 'UserProfile', params: {id: 1}}">個人信息</router-link>

說明：此時我們將 to 改為了 :to扶认，是為了將這一屬性當(dāng)成對象使用侨拦，注意 router-link 中的 name 屬性名稱 一定要和 路由中的 name 屬性名稱 匹配，因為這樣 Vue 才能找到對應(yīng)的路由路徑辐宾；

代碼方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

接收參數(shù)

在目標(biāo)組件中使用

{{ $route.params.id }}

來接收參數(shù)

使用 props 的方式

修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

說明：主要增加了 props: true 屬性

傳遞參數(shù)

同上

接收參數(shù)

為目標(biāo)組件增加 props 屬性狱从，代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

接收參數(shù)

組件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路徑不同但組件相同的情況下

配置重定向

修改路由配置

    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome',
      redirect: '/main'
    }

說明：這里定義了兩個路徑叠纹，一個是 /main 季研，一個是 /goHome，其中 /goHome 重定向到了 /main 路徑誉察，由此可以看出重定向不需要定義組件与涡；

重定向到組件

設(shè)置對應(yīng)路徑即可

<router-link to="/goHome">回到首頁</router-link>

帶參數(shù)的重定向

修改路由配置

    {
      // 首頁
      path: '/main/:username',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome/:username',
      redirect: '/main/:username'
    }

重定向到組件

<router-link to="/goHome/Lusifer">回到首頁</router-link>

路由模式與 404

路由模式有兩種

• hash：路徑帶 # 符號，如 http://localhost/#/login
• history：路徑不帶 # 符號持偏，如 http://localhost/login

修改路由配置驼卖，代碼如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

處理 404

創(chuàng)建一個名為 NotFound.vue 的視圖組件，代碼如下：

<template>
    <div>
      頁面不存在鸿秆，請重試酌畜！
    </div>
</template>

<script>
    export default {
        name: "NotFount"
    }
</script>

<style scoped>

</style>

修改路由配置，代碼如下：

    {
      path: '*',
      component: NotFound
    }

路由鉤子與異步請求

路由中的鉤子函數(shù)

• beforeRouteEnter：在進入路由前執(zhí)行
• beforeRouteLeave：在離開路由前執(zhí)行

案例代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("準(zhǔn)備進入個人信息頁");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準(zhǔn)備離開個人信息頁");
      next();
    }
  }

參數(shù)說明：

• to：路由將要跳轉(zhuǎn)的路徑信息
• from：路徑跳轉(zhuǎn)前的路徑信息
• next：路由的控制參數(shù)
  • next() 跳入下一個頁面
  • next('/path') 改變路由的跳轉(zhuǎn)方向卿叽，使其跳到另一個路由
  • next(false) 返回原來的頁面
  • next((vm)=>{}) 僅在 beforeRouteEnter 中可用檩奠，vm 是組件實例

在鉤子函數(shù)中使用異步請求

安裝 Axios

npm install axios -s

引用 Axios

import axios from 'axios'
Vue.prototype.axios = axios;

在 beforeRouteEnter 中進行異步請求，案例代碼如下：

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("準(zhǔn)備進入個人信息頁");
      // 注意附帽，一定要在 next 中請求埠戳，因為該方法調(diào)用時 Vue 實例還沒有創(chuàng)建，此時無法獲取到 this 對象蕉扮，在這里使用官方提供的回調(diào)函數(shù)拿到當(dāng)前實例
      next(vm => {
        vm.getData();
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準(zhǔn)備離開個人信息頁");
      next();
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/data.json'
        }).then(function (repos) {
          console.log(repos);
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }