VueRouter怎么實現(xiàn)

這篇文章將為大家詳細講解有關(guān)Vue Router怎么實現(xiàn)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主營巢湖網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機APP定制開發(fā),巢湖h5重慶小程序開發(fā)搭建,巢湖網(wǎng)站營銷推廣歡迎巢湖等地區(qū)企業(yè)咨詢

為什么需要前端路由

在前后端分離的現(xiàn)在，大部分應(yīng)用的展示方式都變成了 SPA（單頁面應(yīng)用 Single Page Application）的模式。為什么會選擇 SPA 呢？原因在于：

  • 用戶的所有操作都在同一個頁面下進行，不進行頁面的跳轉(zhuǎn)。用戶體驗好。

  • 對比多頁面，單頁面不需要多次向服務(wù)器請求加載頁面（只請求一次.html文件），只需要向服務(wù)器請求數(shù)據(jù)（多虧了 ajax）。因此，瀏覽器不需要渲染整個頁面。用戶體驗好。

歸根結(jié)底，還是因為 SPA 能夠提供更好的用戶體驗。

為了更好地實現(xiàn) SPA，前端路由是必不可少的。假設(shè)一個場景：用戶在 SPA 頁面的某個狀態(tài)下，點擊了強制刷新按鈕。如果沒有前端路由記住當前狀態(tài)，那么用戶點擊該按鈕之后，就會返回到最開始的頁面狀態(tài)。這不是用戶想要的。

當然，需要前端路由另一個點在于：我們可以更好地進行 SPA 頁面的管理。通過將組件與路由發(fā)生配對關(guān)聯(lián)，依據(jù)路由的層級關(guān)系，可為 SPA 內(nèi)部的組件劃分與管理提供一個依據(jù)參考。

Hash 路由模式 與 History 路由模式

這是兩種常見的前端路由模式。

Hash 路由模式

Hash 模式使用了瀏覽器 URL 后綴中的#xxx部分來實現(xiàn)前端路由。默認情況下，URL后綴中的#xxx hash 部分是用來做網(wǎng)頁的錨點功能的，現(xiàn)在前端路由看上了這個點，并對其加以利用。
比如這個 URL：http://www.abc.com/#/hello，hash 的值為 #/hello。

為什么會看上瀏覽器URL后綴中的 hash 部分呢？原因也簡單：

  • 瀏覽器URL后綴中的 hash 改變了，不會觸發(fā)請求，對服務(wù)器完全沒有影響。它的改變不會重新加載瀏覽器頁面。

  • 更關(guān)鍵的一點是，因為hash發(fā)生變化的url都會被瀏覽器記錄下來，從而你會發(fā)現(xiàn)瀏覽器的前進后退都可以用了，頁面的狀態(tài)與瀏覽器的URL就發(fā)生了掛鉤。

hash模式背后的原理是onhashchange事件,可以在window對象上監(jiān)聽這個事件。

History 路由模式

隨著 HTML5 中 history api 的到來，前端路由開始進化了。hashchange 只能改變 # 后面的代碼片段，history api （pushState、replaceState、go、back、forward） 則給了前端完全的自由。簡單講，它的功能更為強大了：分為兩大部分，切換和修改。

路由切換

參考MDN，切換歷史狀態(tài)包括 back、forward、go 三個方法，對應(yīng)瀏覽器的前進，后退，跳轉(zhuǎn)操作。

history.go(-2);//后退兩次
history.go(2);//前進兩次
history.back(); //后退
hsitory.forward(); //前進

路由修改

修改歷史狀態(tài)包括了pushState,replaceState兩個方法：

/**
 ** 參數(shù)含義
 ** state: 需要保存的數(shù)據(jù)，這個數(shù)據(jù)在觸發(fā)popstate事件時，可以在event.state里獲取
 ** title：標題，基本沒用，一般傳 null
 ** url：設(shè)定新的歷史記錄的 url
 */ 
window.history.pushState(state, title, url) 

//假設(shè)當前的url是：https://www.abc.com/a/
//例子1
history.pushState(null, null, './cc/') //此時的url為https://www.abc.com/a/cc/
//例子2
history.pushState(null, null, '/bb/') //此時的url為https://www.abc.com/bb/

同樣的，history 模式可以監(jiān)聽到對應(yīng)的事件：

window.addEventListener("popstate", function() {
// 監(jiān)聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發(fā) 
});

History 模式的注意點

和 Hash 模式相比，History 模式存在著更多的選擇。但是也有一些自身的注意點：在用戶點擊強制刷新的時候，History 模式會向服務(wù)器發(fā)送請求。

為了解決這個問題，需要服務(wù)器做對應(yīng)的處理。服務(wù)器可以針對不同的URL進行處理，當然，也可以簡單處理：只要是未匹配到的URL請求，一律返回同一個 index.html 頁面。

Vue Router 做了什么？

Vue Router 作為 Vue 生態(tài)系統(tǒng)中非常重要的一個成員，它實現(xiàn)了 Vue 應(yīng)用的路由管理?？梢哉f，Vue Router 是專門為 Vue 量身定制的路由管理器，功能點非常多。它的內(nèi)部實現(xiàn)是與 Vue 自身是有強耦合關(guān)系的（Vue Router 內(nèi)部利用了 Vue 的數(shù)據(jù)響應(yīng)式）。
我們來看一個典型的 Vue Router 配置：

import Vue from "vue";
import App from "./vue/App.vue";
import VueRouter from 'vue-router';

//以插件的形式，使用VueRouter
Vue.use(VueRouter);

//路由配置信息，可以從外部文件引入，在此直接寫是為了方便演示
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
 { path: '/', component: Foo },
 { path: '/bar', component: Bar }
]

//初始化并與 Vue 實例關(guān)聯(lián)
const router = new VueRouter({routes});
new Vue({
 router,
 render: h => h(App),
}).$mount("#root");

可看出，VueRouter 是作為插件的形式引入到 Vue 系統(tǒng)內(nèi)部的。而將具體的 router 信息嵌入到每個 Vue 實例中，則是作為 Vue 的構(gòu)造函數(shù)參數(shù)傳入。

同時來看看如何使用它：

//routerExample.vue
<template>
  <div>
    <h2 @click="goBack">App Test</h2>
    <router-link to="/">foo</router-link>
    <router-link to="/bar">bar</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
 methods: {
  goBack() {
   console.log(this.$router); 
   window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
  }
 }
}
</script>

<style lang="less" scoped>

</style>

上面的代碼中，我們可以直接使用router-link和router-view這兩個組件。它們是隨著 Vue Router 一起引入的，作為全局組件使用。

這就是一個最簡單的 Vue Router 的使用方式。我們下面就來看看，該如何自己實現(xiàn)上面的簡單功能，做一個自己的 Vue Router。

一個簡單的 Vue Router 實現(xiàn)

看了上面的這個過程，最簡單的 Vue Router 應(yīng)該包括以下實現(xiàn)步驟：

實現(xiàn) Vue 規(guī)定的插件的寫法，將我們自己的Vue Router 作為插件引入 Vue 系統(tǒng)中。

  • router功能一：解析傳入的routes選項，以備調(diào)用

  • router功能二：監(jiān)控URL變化（兩種路由方式：history、hash）

實現(xiàn)兩個全局組件：router-link和router-view

看看自定義的 Vue Router 的實現(xiàn)：

//FVueRouter.js

 let Vue; //保存 Vue 構(gòu)造函數(shù)的引用，與 Vue 深度綁定

 class FVueRouter {
  constructor(options){
    this.$options = options;
    //保存路由的路徑與路由組件的對應(yīng)關(guān)系
    this.routerMap = {};

    //當前的URL必須是響應(yīng)式的，使用一個新的 Vue 實例來實現(xiàn)響應(yīng)式功能
    this.app = new Vue({
      data: {current : "/"}
    })
  }

  init(){
    //監(jiān)聽路由事件
    this.bindEvents();
    //解析傳入的routes
    this.createRouterMap();
    //全局組件的聲明
    this.initComponent();
  }

  bindEvents(){
    window.addEventListener('hashchange', this.onHashChange.bind(this));
  }

  onHashChange(){
    this.app.current = window.location.hash.slice(1) || '/';
  }

  createRouterMap(){
    this.$options.routes.forEach(route => {
      this.routerMap[route.path] = route;
    })
  }

  initComponent() {
    // 形式：<router-link to="/"> 轉(zhuǎn)換目標=> <a href="#/" rel="external nofollow" >xxx</a>
    Vue.component("router-link", {
     props: {
      to: String,
     },
     render(h) {
      // h(tag, data, children)
      return h('a', {
        attrs: {href: '#' + this.to}
      }, [this.$slots.default])
     },
    });
    // 獲取path對應(yīng)的Component將它渲染出來
    Vue.component("router-view", {
      render: (h) => {
        //此處的this 能夠正確指向 FVouter內(nèi)部，是因為箭頭函數(shù)
        const Component = this.routerMap[this.app.current].component;
        return h(Component)
      }
    })
   }
 }

 // 所有的插件都需要實現(xiàn)install 方法，傳入?yún)?shù)是Vue的構(gòu)造函數(shù)
 FVueRouter.install = function(_Vue){
  //將Vue的構(gòu)造函數(shù)保存起來
  Vue = _Vue;

  //實現(xiàn)一個混入操作的原因，插件的install階段非常早，此時并沒有Vue實例
  //因此，使用mixin，延遲對應(yīng)操作到Vue實例構(gòu)建的過程中來執(zhí)行。
  Vue.mixin({
    beforeCreate(){
      //獲取到Router的實例，并將其掛載在原型上
      if(this.$options.router){
        //根組件beforeCreate時只執(zhí)行一次
        Vue.prototype.$router = this.$options.router;

        this.init();
      }
    }
  })
 }

export default FVueRouter;

這里是最為簡單的一種實現(xiàn)。有幾個值得注意的點：

  • 如上代碼，將最基本的一個Vue Router 的代碼架子搭建起來了，能夠運行。但細微處依然需要酌情考慮。

  • 關(guān)于插件的寫法：自定義插件內(nèi)部必須實現(xiàn)一個 install 方法，傳入?yún)?shù)是Vue的構(gòu)造函數(shù)。

  • 使用了一個新的Vue 實例，將 URL 的 hash 變量進行數(shù)據(jù)響應(yīng)化處理。

  • 關(guān)于渲染函數(shù) render 的參數(shù) h，它實際上是 createElement 函數(shù)。具體用法值得深究。代碼中使用的是最為簡單的處理方式。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

關(guān)于“Vue Router怎么實現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)頁標題：VueRouter怎么實現(xiàn)
網(wǎng)站URL：http://muchs.cn/article34/jpgjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航、、用戶體驗、關(guān)鍵詞優(yōu)化、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)