【Vue】Re14 Router 第一部分

阿新 • • 發佈：2020-11-01

一、箭頭函式（Lambda匿名函式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">

    /* 建立函式一 */
    const aaa = function () {
        // todo ....
    };

    const object = 
 {
        /* 建立函式二 */
        bbb : function () {
            // todo ...
        },

        /* 建立函式三 */
        ccc () {
            // todo ...
        }
    };

    /* 建立函式四 */
    const ddd = () => {
        // todo ...
    };

    /**
     * 箭頭函式可理解為Lambda表示式，亦可稱為匿名錶達式，或者匿名函式
     * 函式不再具有名稱，只留下引數和函式邏輯，
     * 可以呼叫和宣告一體式編寫
     *
     * 語法Syntax
     * const fun = (引數列表) => {
     *     // todo ...
     * }
     *
     * 無參箭頭函式
     * const fun2 = () => { // todo ... }
     *
     * 一個引數
     * const fun2 = (param) => { // todo ... with param }
     * 可以縮寫，不需要括號
     * const fun2 = param => { // todo ... with param }
     *
     * 多引數
     * const fun2 = (param1, param2) => { // todo ... with params }
     *
     *
     * 如果函式邏輯只有一行語句，可以不需要大括號
     * 一行語句
     * const oneLine = (n1, n2) => {
     *     return n1 + n2 ;
     * }
     * 直接縮寫成
     * const oneLine = (n1, n2) => n1 + n2 ; // 省略函式體與return關鍵字
      
*/

     // 箭頭函式與this關鍵字的問題
     const object2 = {
        method1 () {
            setTimeout(function () {
                console.log(this); // 這個this是window物件
            }, 1000);
            setTimeout(() => console.log(this), 1000); // 這個this是這個object2物件
        }
     }
     object2.method1();
     // 結論：箭頭函式會向外層作用域中一層層查詢this，直到This定義並引用this物件【也就是查詢最近的this物件】 

</script>
</body>
</html>

二、建立案例環境

先使用Vue2方式進行建立：

三、路由概述

路由更像是音譯過來的詞語 Routing

維基百科給出的解釋是：

通過網際網路把資訊從源地址傳輸的目的地址的活動

生活概念：路由器

兩種機制：路由和轉送

路由決定資料包從來源到目的地的路徑

轉送將輸入端的資料轉移到合適的輸出端

路由表的概念

本質是一個對映表，決定了資料包的指向

四、前端渲染 & 後端渲染

1、網頁發展階段歷史：

第一階段：後端渲染
jsp\php\asp\
html + css + javascript
頁面跳轉由後端的控制器實現

第二階段：前後端分離
ajax 技術實現
資料轉API傳輸，維護方便
還是多個頁面組成處理

第三階段：SPA
單頁面應用

詳細說明：

https://www.bilibili.com/video/BV15741177Eh?p=100

2、URL的Hash & H5的History

首先執行之前建立的案例專案

npm run dev

我們清空瀏覽器的請求資源再次更改會發現，網頁只更新了favicon.icon

其他資源不發生請求，但是URL地址發生了變化

使用HTML5的History物件操作也是一樣可以的

pushState是類似壓棧的形式操作url

可以使用back回退上一個url，push和back相當於壓棧和彈棧的關係

也可以使用fowward

但是使用replaceState跳轉，是無法回退的

如果不希望一個一個的回退，可以使用go回退指定索引的url

五、Vue - Router

安裝

之前已經在建立案例專案時勾選了router安裝，

如果沒有也沒關係，使用命令進行手動安裝

npm install vue-router --save

使用

1、匯入路由，呼叫Vue.use注入

2、建立路由例項，傳入對映配置

3、在例項中掛在路由例項

這個router目錄就是建立專案時自動生成的

裡面的index.js檔案：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

path表示url路徑

name表示路由名稱

component表示掛載的元件

不過我們一般的寫法會進行拆分解耦，這樣解析步驟：

/* 1、 首先引用Vue依賴 */
import Vue from "vue/types/vue";
/* 2、 然後是VueRouter */
import VueRouter from "vue-router";

/* 3、 呼叫Vue.use方法註冊VueRouter */
Vue.use(VueRouter);

/* 4、配置需要的路由對映 */
const routerList = [
  /* 配置對映關係 url -> component */
]

/* 5、建立VueRouter例項 */
const router = new VueRouter({
  routes : routerList
});

/* 6、把此router例項掛載到Vue例項中，所以需要匯出 */
export default router;

配置對映關係：

第一個案例專案就作為模板保留

建立第二個案例專案，把router目錄的index.js檔案換成上面的內容【router/index.js】

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

Vue.use(Router);

const routerList = [

]
const router = new Router({
  routes : routerList
});
export default router;

移除components的Helloworld.vue元件檔案

移除App.vue的標籤：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

建立Home元件

<template>
  <div>
    <h3>這是首頁Home元件</h3>
    <p>首頁Home元件的內容</p>
  </div>
</template>

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

<style scoped>

</style>

建立About元件

<template>
  <div>
    <h3>這是關於About元件</h3>
    <p>關於About元件的內容</p>
  </div>
</template>

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

<style scoped>

</style>

配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from "../components/Home";
import About from "../components/About";

Vue.use(Router);

const routerList = [
  {
    path : '/home', /* 為什麼這裡是path不是url？ 因為完整的url還包括 專案根url（協議頭 + 域名（或者IP地址） + 埠號 + 專案根名稱路徑（可選））  */
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
]
const router = new Router({
  routes : routerList
});
export default router;

App.vue配置路由標籤

<template>
  <div id="app">
    <router-link to="/home">去首頁</router-link>
    <router-link to="/about">去關於</router-link>
  </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>

執行預覽後可以發現其實link標籤就是a標籤

但是為什麼沒有顯示出來，原因是因為我們還沒寫view標籤

<template>
  <div id="app">
    <router-link to="/home">去首頁</router-link>
    <router-link to="/about">去關於</router-link>
    <router-view></router-view>
  </div>
</template>