Vue.js?前端路由和異步組件介紹

更新時(shí)間：2022年09月12日 09:42:52 作者：沵算what

這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

1、router 使用
2、動(dòng)態(tài)路由匹配
3、響應(yīng)路由參數(shù)的變化
4、捕獲所有路由或 404 Not found 路由
5、導(dǎo)航守衛(wèi)
6、完整的導(dǎo)航解析流程
7、導(dǎo)航守衛(wèi)執(zhí)行順序（面試?。。。?/a>
8、滾動(dòng)行為（面試?。。。?/a>
9、路由懶加載

文章目標(biāo)

P6

針對(duì) react/vue 能夠根據(jù)業(yè)務(wù)需求口噴 router 的關(guān)鍵配置，包括但不限于：路由的匹配規(guī)則、路由守衛(wèi)、路由分層等；
能夠描述清楚 history 的主要模式，知道 history 和 router 的邊界；

P6+ ~ P7

在沒(méi)有路由的情況下，也可以根據(jù)也無(wú)需求，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的路由；
讀過(guò) router 底層的源碼，不要求每行都讀，可以口噴關(guān)鍵代碼即可；

一、背景

遠(yuǎn)古時(shí)期，當(dāng)時(shí)前后端還是不分離的，路由全部都是由服務(wù)端控制的，前端代碼和服務(wù)端代碼過(guò)度融合在一起。

客戶端 --> 前端發(fā)起 http 請(qǐng)求 --> 服務(wù)端 --> url 路徑去匹配不同的路由 --> 返回不同的數(shù)據(jù)。

這種方式的缺點(diǎn)和優(yōu)點(diǎn)都非常明顯：

優(yōu)點(diǎn)：因?yàn)橹苯臃祷匾粋€(gè) html，渲染了頁(yè)面結(jié)構(gòu)。SEO 的效果非常好，首屏?xí)r間特別快；
- 在瀏覽器輸入一個(gè) url 開(kāi)始到頁(yè)面任意元素加載出來(lái)/渲染出來(lái) --> 首屏?xí)r間；
缺點(diǎn)：前端代碼和服務(wù)端代碼過(guò)度融合在一起，開(kāi)發(fā)協(xié)同非常的亂。服務(wù)器壓力大，因?yàn)榘褬?gòu)建 html 的工作放在的服務(wù)端；

后來(lái) ...隨之 ajax 的流行，異步數(shù)據(jù)請(qǐng)求可以在瀏覽器不刷新的情況下進(jìn)行。

后來(lái) ...出現(xiàn)了更高級(jí)的體驗(yàn) —— 單頁(yè)應(yīng)用。

頁(yè) --> HTML 文件
單頁(yè) --> 單個(gè) HTML 文件

在單頁(yè)應(yīng)用中，不僅在頁(yè)面中的交互是不刷新頁(yè)面的，就連頁(yè)面跳轉(zhuǎn)也都是不刷新頁(yè)面的。

單頁(yè)應(yīng)用的特點(diǎn)：

頁(yè)面中的交互是不刷新的頁(yè)面的，比如點(diǎn)擊按鈕，比如點(diǎn)擊出現(xiàn)一個(gè)彈窗；
多個(gè)頁(yè)面間的交互，不需要刷新頁(yè)面(a/b/c，a-> b -> c)；加載過(guò)的公共資源，無(wú)需再重復(fù)加載；

而支持起單頁(yè)應(yīng)用這種特性的，就是 前端路由。

二、前端路由特性

前端路由的需求是什么？

根據(jù)不同的 url 渲染不同內(nèi)容；
不刷新頁(yè)面；

也就是可以在改變 url 的前提下，保證頁(yè)面不刷新。

三、面試！??！

Hash 路由和 History 路由的區(qū)別？

hash 有 #，history 沒(méi)有 #；
hash 的 # 部分內(nèi)容不會(huì)給服務(wù)端，主要一般是用于錨點(diǎn)， history 的所有內(nèi)容都會(huì)給服務(wù)端；
hash 路由是不支持 SSR 的，history 路由是可以的；
hash 通過(guò) hashchange 監(jiān)聽(tīng)變化，history 通過(guò) popstate 監(jiān)聽(tīng)變化；

四、Hash 原理及實(shí)現(xiàn)

1、特性

hash 的出現(xiàn)滿足了這個(gè)需求，他有以下幾種特征：

url 中帶有一個(gè) # 符號(hào)，但是 # 只是瀏覽器端/客戶端的狀態(tài)，不會(huì)傳遞給服務(wù)端；
- 客戶端路由地址 www.baidu.com/#/user --> 通過(guò) http 請(qǐng)求 --> 服務(wù)端接收到的 www.baidu.com/
- 客戶端路由地址 www.baidu.com/#/list/detail/1 --> 通過(guò) http 請(qǐng)求 --> 服務(wù)端接收到的 www.baidu.com/
hash 值的更改，不會(huì)導(dǎo)致頁(yè)面的刷新；

location.hash = '#aaa';
location.hash = '#bbb';
// 從 #aaa 到 #bbb，頁(yè)面是不會(huì)刷新的

不同 url 會(huì)渲染不同的頁(yè)面；
hash 值的更改，會(huì)在瀏覽器的訪問(wèn)歷史中添加一條記錄，所以我們才可以通過(guò)瀏覽器的返回、前進(jìn)按鈕來(lái)控制 hash 的切換；
hash 值的更改，會(huì)觸發(fā) hashchange 事件；

location.hash = '#aaa';
location.hash = '#bbb';

window.addEventLisenter('hashchange', () => {});

2、如何更改 hash

我們同樣有兩種方式來(lái)控制 hash 的變化：

location.hash 的方式：

location.hash = '#aaa';
location.hash = '#bbb';

html 標(biāo)簽的方式：

<a href="#user" rel="external nofollow" > 點(diǎn)擊跳轉(zhuǎn)到 user </a>

<!-- 等同于下面的寫法 -->
location.hash = '#user';

3、手動(dòng)實(shí)現(xiàn)一個(gè)基于 hash 的路由

./index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" rel="external nofollow"  />
  </head>
  <body>
    <div class="container">
      <a href="#gray" rel="external nofollow" >灰色</a>
      <a href="#green" rel="external nofollow" >綠色</a>
      <a href="#" rel="external nofollow" >白色</a>
      <button onclick="window.history.go(-1)">返回</button>
    </div>

    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

./index.css

.container {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  font-size: 18px;
  font-weight: bold;

  background: black;
  color: white;
}

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: white;
}

./index.js

/* 
  期望看到的效果：點(diǎn)擊三個(gè)不同的 a 標(biāo)簽，頁(yè)面的背景顏色會(huì)隨之變化
*/
class BaseRouter {
  constructor() {
    this.routes = {}; // 存儲(chǔ) path 以及 callback 的對(duì)應(yīng)關(guān)系
    this.refresh = this.refresh.bind(this); // 如果不 bind 的話，refresh 方法中的 this 指向 window
    // 處理頁(yè)面 hash 變化，可能存在問(wèn)題：頁(yè)面首次進(jìn)來(lái)可能是 index.html，并不會(huì)觸發(fā) hashchange 方法
    window.addEventListener('hashchange', this.refresh);

    // 處理頁(yè)面首次加載
    window.addEventListener('load', this.refresh);
  }

  /**
   * route
   * @param {*} path 路由路徑
   * @param {*} callback 回調(diào)函數(shù)
   */
  route(path, callback) {
    console.log('========= route 方法 ========== ', path);
    // 向 this.routes 存儲(chǔ) path 以及 callback 的對(duì)應(yīng)關(guān)系
    this.routes[path] = callback || function () {};
  }

  refresh() {
    // 刷新頁(yè)面
    const path = `/${location.hash.slice(1) || ''}`;
    console.log('========= refresh 方法 ========== ', path);
    this.routes[path]();
  }
}

const body = document.querySelector('body');
function changeBgColor(color) {
  body.style.backgroundColor = color;
}

const Router = new BaseRouter();

Router.route('/', () => changeBgColor('white'));
Router.route('/green', () => changeBgColor('green'));
Router.route('/gray', () => changeBgColor('gray'));

五、History 原理及實(shí)現(xiàn)

hash 有個(gè) # 符號(hào)，不美觀，服務(wù)端無(wú)法接受到 hash 路徑和參數(shù)。

歷史的車輪無(wú)情攆過(guò) hash，到了 HTML5 時(shí)代，推出了 History API。

1、HTML5 History 常用的 API

window.history.back(); // 后退

window.history.forward(); // 前進(jìn)

window.history.go(-3); // 接收 number 參數(shù)，后退 N 個(gè)頁(yè)面

window.history.pushState(null, null, path);

window.history.replaceState(null, null, path);

其中最主要的兩個(gè) API 是 pushState 和 replaceState，這兩個(gè) API 都可以在不刷新頁(yè)面的情況下，操作瀏覽器歷史記錄。

不同的是，pushState 會(huì)增加歷史記錄，replaceState 會(huì)直接替換當(dāng)前歷史記錄。

2、pushState/replaceState 的參數(shù)

pushState：頁(yè)面的瀏覽記錄里添加一個(gè)歷史記錄；
replaceState：替換當(dāng)前歷史記錄；

他們的參數(shù)是?樣的，三個(gè)參數(shù)分別是：

state：是一個(gè)對(duì)象，是一個(gè)與指定網(wǎng)址相關(guān)的對(duì)象，當(dāng) popstate 事件觸發(fā)的時(shí)候，該對(duì)象會(huì)傳入回調(diào)函數(shù)；
title：新頁(yè)面的標(biāo)題，瀏覽器支持不一，建議直接使用 null；
url：頁(yè)面的新地址；

3、History 的特性

History API 有以下幾個(gè)特性：

沒(méi)有 #；
history.pushState() 或 history.replaceState() 不會(huì)觸發(fā) popstate 事件，這時(shí)我們需要手動(dòng)觸發(fā)頁(yè)面渲染；
可以使用 history.popstate 事件來(lái)監(jiān)聽(tīng) url 的變化；
只有用戶點(diǎn)擊瀏覽器 倒退按鈕 和 前進(jìn)按鈕，或者使用 JavaScript 調(diào)用 back、forward、go 方法時(shí)才會(huì)觸發(fā) popstate；

4、面試！?。?/h3>
`pushState` 時(shí)，會(huì)觸發(fā) `popstate` 嗎？

`pushState/replaceState` 并不會(huì)觸發(fā) `popstate` 事件，這時(shí)我們需要手動(dòng)觸發(fā)頁(yè)面的重新渲染；
我們可以使用 `popstate` 來(lái)監(jiān)聽(tīng) `url` 的變化；
`popstate` 到底什么時(shí)候才能觸發(fā)：

點(diǎn)擊瀏覽器后退按鈕；
點(diǎn)擊瀏覽器前進(jìn)按鈕；
`js` 調(diào)用 `back` 方法；
`js` 調(diào)用 `forward` 方法；
`js` 調(diào)用 `go` 方法；

5、手動(dòng)實(shí)現(xiàn)一個(gè)基于 History 的路由

./index.html

./index.css

.container {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  font-size: 18px;
  font-weight: bold;

  background: black;
  color: white;
}

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: white;
}

./index.js

class BaseRouter {
  constructor() {
    this.routes = {};

    // location.href; => hash 的方式
    console.log('location.pathname ======== ', location.pathname); // http://127.0.0.1:8080/green ==> /green
    this.init(location.pathname);
    this._bindPopState();
  }

  init(path) {
    // pushState/replaceState 不會(huì)觸發(fā)頁(yè)面的渲染，需要我們手動(dòng)觸發(fā)
    window.history.replaceState({ path }, null, path);
    const cb = this.routes[path];
    if (cb) {
      cb();
    }
  }

  route(path, callback) {
    this.routes[path] = callback || function () {};
  }

  // ! 跳轉(zhuǎn)并執(zhí)行對(duì)應(yīng)的 callback
  go(path) {
    // pushState/replaceState 不會(huì)觸發(fā)頁(yè)面的渲染，需要我們手動(dòng)觸發(fā)
    window.history.pushState({ path }, null, path);
    const cb = this.routes[path];
    if (cb) {
      cb();
    }
  }
  // ! 演示一下 popstate 事件觸發(fā)后，會(huì)發(fā)生什么
  _bindPopState() {
    window.addEventListener('popstate', e => {
      /* 
        觸發(fā)條件：
          1、點(diǎn)擊瀏覽器前進(jìn)按鈕
          2、點(diǎn)擊瀏覽器后退按鈕
          3、js 調(diào)用 forward 方法
          4、js 調(diào)用 back 方法
          5、js 調(diào)用 go 方法
      */
      console.log('popstate 觸發(fā)了');
      const path = e.state && e.state.path;
      console.log('path >>> ', path);
      this.routes[path] && this.routes[path]();
    });
  }
}
const Router = new BaseRouter();
const body = document.querySelector('body');
const container = document.querySelector('.container');

function changeBgColor(color) {
  body.style.backgroundColor = color;
}
Router.route('/', () => changeBgColor('white'));
Router.route('/gray', () => changeBgColor('gray'));
Router.route('/green', () => changeBgColor('green'));

container.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    console.log(e.target.getAttribute('href')); // /gray  /green 等等
    Router.go(e.target.getAttribute('href'));
  }
});

六、Vue-Router

1、router 使用

使用 Vue.js，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 Vue Router 添加進(jìn)來(lái)，我們需要做的是，將組件（components）映射到路由（routes），然后告訴 Vue Router 在哪里渲染它們。

舉個(gè)例子：

<!-- 路由匹配到的組件將渲染在這里 -->
<div id="app">
  <router-view></router-view>
</div>

// 如果使用模塊化機(jī)制編程，導(dǎo)入 Vue 和 VueRouter，要調(diào)用 Vue.use(VueRouter)

// 1、定義（路由）組件
// 可以從其他文件 import 進(jìn)來(lái)
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };

// 2、定義路由
//每個(gè)路由應(yīng)該映射一個(gè)組件，其中 component 可以是通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，或者只是一個(gè)組件配置對(duì)象
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
];

// 3、創(chuàng)建 router 實(shí)例，然后傳 routes 配置
const router = new VueRouter({
  routes,
});

// 4、創(chuàng)建和掛載根實(shí)例
// 記得要通過(guò) router 配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能
const app = new Vue({
  router,
}).$mount('#app');

2、動(dòng)態(tài)路由匹配

我們經(jīng)常需要把某種模式匹配到的所有路由，全部映射到同個(gè)組件，比如用戶信息組件，不同用戶使用同一個(gè)組件。

可以通過(guò) $route.params.id 或者參數(shù)。

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù)，以冒號(hào)開(kāi)頭
    { path: '/user/:id', component: User },
  ],
});

const User = {
  template: '<div>User: {{ $route.params.id }}</div>',
};

3、響應(yīng)路由參數(shù)的變化

復(fù)用組件時(shí)，想對(duì) 路由參數(shù) 的變化作出響應(yīng)的話，可以使用 watch 或者 beforeRouteUpdate：

舉個(gè)例子：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    },
  },
};

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // 對(duì)路由變化作出響應(yīng)...
    // don't forget to call next()
  },
};

4、捕獲所有路由或 404 Not found 路由

當(dāng)時(shí)用通配符路由時(shí)，請(qǐng)確保路由的順序是正確的，也就是說(shuō)含有通配符的路由應(yīng)該在最后。

舉個(gè)例子：

5、導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種方式植入路由導(dǎo)航過(guò)程中：

全局的
- 全局前置守衛(wèi)：router.beforeEach
- 全局解析守衛(wèi)：router.beforeResolve
- 全局后置鉤子：router.afterEach
單個(gè)路由獨(dú)享的
- 路由獨(dú)享守衛(wèi)：beforeEnter
組件級(jí)的
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave

6、完整的導(dǎo)航解析流程

導(dǎo)航被觸發(fā)；
在失活的組件里調(diào)用離開(kāi)守衛(wèi)（前一個(gè)組件的 beforeRouteLeave）；
調(diào)用全局的 beforeEach 守衛(wèi)；
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)；
在路由配置里調(diào)用 beforeEnter；
解析異步路由組件；
在被激活的組件里調(diào)用 beforeRouterEnter；
調(diào)用全局的 beforeResolve 守衛(wèi)；
導(dǎo)航被確認(rèn)；
調(diào)用全局的 afterEach 鉤子；
觸發(fā) DOM 更新；
用創(chuàng)建好的實(shí)例調(diào)用 beforeRouterEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)；

舉個(gè)例子：

// 全局
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

// 全局的導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
  console.log(`Router.beforeEach => from=${from.path}, to=${to.path}`);
  // 可以設(shè)置頁(yè)面的 title
  document.title = to.meta.title || '默認(rèn)標(biāo)題';
  // 執(zhí)行下一個(gè)路由導(dǎo)航
  next();
});

router.afterEach((to, from) => {
  console.log(`Router.afterEach => from=${from.path}, to=${to.path}`);
});

// 路由獨(dú)享
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 配置數(shù)組里針對(duì)單個(gè)路由的導(dǎo)航守衛(wèi)
        console.log(`TestComponent route config beforeEnter => from=${from.path}, to=${to.path}`);
        next();
      },
    },
  ],
});

// 組件
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 comfirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 this，因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被調(diào)用
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉個(gè)例子來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用
    // 可以訪問(wèn)組件實(shí)例 this
  },
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 this
  },
};

next 必須調(diào)用：

next()：進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed（確認(rèn)的）。
next(false)：中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
next("/") 或者 next({ path: "/" })：跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: "home" 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。
next(error)：如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。

7、導(dǎo)航守衛(wèi)執(zhí)行順序（面試?。。。?/h3>
【組件】前一個(gè)組件的 `beforeRouteLeave`
【全局】的 `router.beforeEach`
【組件】如果是路由參數(shù)變化，觸發(fā) `beforeRouteUpdate`
【配置文件】里，下一個(gè)的 `beforeEnter`
【組件】?jī)?nèi)部聲明的 `beforeRouteEnter`
【全局】的 `router.afterEach`

8、滾動(dòng)行為（面試?。。。?/h3>

vue-router 里面，怎么記住前一個(gè)頁(yè)面的滾動(dòng)條的位置？？？

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾動(dòng)到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。

Vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

【注意】：這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。

scrollBehavior 生效的條件：

瀏覽器支持 history API；
頁(yè)面間的交互是通過(guò) go，forward，back 或者 瀏覽器的前進(jìn)/返回按鈕；

window.history.back(); // 后退
window.history.forward(); // 前進(jìn)
window.history.go(-3); // 接收 number 參數(shù)，后退 N 個(gè)頁(yè)面

舉個(gè)例子：

// 1. 記?。菏謩?dòng)點(diǎn)擊瀏覽器返回或者前進(jìn)按鈕，記住滾動(dòng)條的位置，基于 history API 的，其中包括：go、back、forward、手動(dòng)點(diǎn)擊瀏覽器返回或者前進(jìn)按鈕
// 2. 沒(méi)記?。簉outer-link，并沒(méi)有記住滾動(dòng)條的位置

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    console.log(savedPosition); // 已保存的位置信息
    return savedPosition;
  },
});

9、路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

舉個(gè)例子：

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }],
});

到此這篇關(guān)于Vue.js 前端路由和異步組件介紹的文章就介紹到這了,更多相關(guān)Vue.js 異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js?前端路由和異步組件介紹

目錄

文章目標(biāo)

P6

P6+ ~ P7

一、背景

二、前端路由特性

三、面試！??！

四、Hash 原理及實(shí)現(xiàn)

1、特性

2、如何更改 hash

3、手動(dòng)實(shí)現(xiàn)一個(gè)基于 hash 的路由

五、History 原理及實(shí)現(xiàn)

1、HTML5 History 常用的 API

2、pushState/replaceState 的參數(shù)

3、History 的特性

5、手動(dòng)實(shí)現(xiàn)一個(gè)基于 History 的路由

六、Vue-Router

1、router 使用

2、動(dòng)態(tài)路由匹配

3、響應(yīng)路由參數(shù)的變化

4、捕獲所有路由或 404 Not found 路由

5、導(dǎo)航守衛(wèi)

6、完整的導(dǎo)航解析流程

9、路由懶加載

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js?前端路由和異步組件介紹

目錄

文章目標(biāo)

P6

P6+ ~ P7

一、背景

二、前端路由特性

三、面試！??！

四、Hash 原理及實(shí)現(xiàn)

1、特性

2、如何更改 hash

3、手動(dòng)實(shí)現(xiàn)一個(gè)基于 hash 的路由

五、History 原理及實(shí)現(xiàn)

1、HTML5 History 常用的 API

2、pushState/replaceState 的參數(shù)

3、History 的特性

5、手動(dòng)實(shí)現(xiàn)一個(gè)基于 History 的路由

六、Vue-Router

1、router 使用

2、動(dòng)態(tài)路由匹配

3、響應(yīng)路由參數(shù)的變化

4、捕獲所有路由或 404 Not found 路由

5、導(dǎo)航守衛(wèi)

6、完整的導(dǎo)航解析流程

9、路由懶加載

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、背景

三、面試！??！

四、Hash 原理及實(shí)現(xiàn)

1、特性

3、手動(dòng)實(shí)現(xiàn)一個(gè)基于 hash 的路由

五、History 原理及實(shí)現(xiàn)

1、HTML5 History 常用的 API

2、pushState/replaceState 的參數(shù)

3、History 的特性

5、手動(dòng)實(shí)現(xiàn)一個(gè)基于 History 的路由

1、router 使用

2、動(dòng)態(tài)路由匹配

3、響應(yīng)路由參數(shù)的變化

4、捕獲所有路由或 404 Not found 路由

5、導(dǎo)航守衛(wèi)

6、完整的導(dǎo)航解析流程

9、路由懶加載