手寫vue路由

walter發表於2022-05-16
Vue路由

目錄

一、簡易demo
// routes註冊
import Vue from "vue";
// import VueRouter from "vue-router";
import VueRouter from "./vueRouter"; // 自定義路由 js
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

// vueRouter
var _Vue = null

export default class VueRouter {
  // 一、 install方法
  static install(Vue) {
    // 1、判斷外掛是否註冊
    if (VueRouter.install.installed) return
    VueRouter.install.installed = true

    // 2、將Vue建構函式記錄到全域性變數
    _Vue = Vue

    // 3、把建立Vue例項的時候傳入的router物件注入到Vue例項上
    // _Vue.prototype.$router = this.$options.router;
    // 混入
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          this.$options.router.init() // ?
        }
      }
    })
  }

  //  二、建構函式
  constructor(options) {
    this.options = options
    this.routeMap = {}
    this.data = _Vue.observable({
      current: '/'
    })
  }

  init() {
    this.createRouteMap()
    this.initComponents(_Vue)
    this.initEvent()
  }

  //   三、createRouteMap
  createRouteMap() {
    //   遍歷所有的路由規則，把路由規則解析成鍵值對，儲存在routeMap中
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }

  //   四、initComponents
  initComponents(Vue) {
    Vue.component('router-link', {
      props: {
        to: String
      },
      //   template: '<a :href="to"><slot></slot></a>'
      render(h) {
        return h(
          'a',
          {
            attrs: {
              href: this.to
            },
            on: {
              click: this.clickHandler
            }
          },
          [this.$slots.default]
        )
      },
      methods: {
        clickHandler(e) {
          history.pushState({}, '', this.to) // 修改位址列 - 不會傳送請求
          this.$router.data.current = this.to // 重新載入響應的元件
          e.preventDefault() // 阻止傳送請求
        }
      }
    })

    const self = this
    Vue.component('router-view', {
      render(h) {
        let component = self.routeMap[self.data.current]
        return h(component)
      }
    })
  }

  //   五、返回按鈕、前進按鈕問題
  initEvent() {
    window.addEventListener('popstate', () => {
      this.data.current = window.location.pathname
    })
  }
}
二、Vue-Router傳參方式

一、普通、動態路由傳參方式

// 路由程式碼傳參
import About from 'about'
// routes 配置
{
  path: '/about/:id', // 動態路由
  component: About,
  props: true // ①布林模式
}

{
  path: '/about', // 普通路由
  component: 'About',
  props: { id: 19 } // ②物件模式
}

// 接收方式 props
props;['id'] 或者
props: {
  id: { type: Number, default: 12}
}
// ③函式模式
routes:[
  {
    path: '/about',
    component: About,
    // props: route => ({id:route.query.id}) // url='/about?id="89"' 或者
    props: route => ({id: route.params.id}) // url='/about/:id' => '/about/89'
  }
]

二、動態路由：將給定匹配模式的路由對映到同一個元件，複用一個元件，相對與銷燬後重建更高效。

  • Keep-alive包括時，元件的宣告週期鉤子函式不會被重複呼叫。

  • 要對同一個元件中引數變化做出響應的話，可以通過watch 偵聽$route物件上的任意屬性

    watch: {
  $route: {
    immediate: true,
    handler(route) {
      // 處理事件 對路由變化做出響應
    }
  }
}

  • 或者使用導航守衛，beforeRouteUpdate，也可以取消導航

三、捕獲所有路由或404路由

四、路由的匹配語法

  • 自定義正則 像可以區分 /list/100 和/list/xsk 等路由

    • routes: [ { path: '/list/:id(\\d+)'}, {path: '/list/:name'} ]

  • 可以重複的引數 匹配多個部分的路由，可以用 * 號和 +號將引數標記為重複

  • 也可通過使用?號修飾符（0個或1個）將一個引數標記為可選

五、巢狀路由、命名路由

六、程式設計式導航

  • 宣告式（）\程式設計式路由 router.push(...)

  • Router.push(params):

    • Params: 字串路徑、路徑物件、命名的路由並加上引數、帶查詢引數、帶hash

    •   '/users/detail'
  { path: '/users/detail' }
  { name: 'detail', params: {id: '0'}}
  { path: '/users/detail', query: {id: '0'} }

  • 替換當前位置 router.replace({path: '/users'}) 或者router.push({path:'users', replace: true}); 導航時不會向history新增記錄

  • history.go()橫跨歷史

七、命名檢視：

八、重定向配置

// 通過routes配置來完成
const routes = [{ path: '/home', redirect: '/'}]
// 重定向的目標也可以是一個命名的路由  redirect: { name: 'Details'}
// 一個方法動態返回重定向目標
const routes = [
  {
    path: '/home/:id',
    redirect: to => {
      return {path:'Details', query: { q: to.params.searchText}}
    }
  }
]
// 別名
alias: '/home'

九、路由元件傳參 props、$route.query$route.params

  • 布林模式 routes配置時 props:true設定即可

  • 物件模式 props: { id: '0' } 當props為靜態的時候很有用

  • 函式模式 建立一個返回props的函式，允許你將引數轉換為其他型別，將靜態值與基於路由的值相結合等操作

    props: route => ({ query: route.query.id })
props: route => ({ params: route.params.id})

  • 對於命名檢視的路由，必須為每個命名檢視定義props配置

    const routes = [{
  path: '/home',
  components: { default: Home, sidebar: Sidebar},
  props: { default: true, sidebar: true}
}]

十、不同的歷史模式

  • Hash模式：history: createWebHashHistory() SEO受影響
  • HTML5模式：history：createWbeHistory() 如果沒有適當的伺服器配置，就會404，需要在伺服器上新增一個簡單的回退路由
三、進階-路由導航

一、導航守衛：vue-router提供的主要是通過跳轉或取消的方式守衛導航。

  • 方式：全域性、單個路由獨享、元件

  • 全域性前置守衛：beforeEnter:

    • 每個守衛都接收兩個__引數__：to\from\next(可選)
    • 返回值 ①false:取消當前導航、②一個路由地址：通過一個路由地址跳轉到不同的地址，類似於router.push()可配置，當前的 導航被中斷然後進行一個新的導航。
    • next可選引數

  • 全域性後置守衛：afterEach 不接受next函式也不會改變導航本身

  • 全域性解析守衛：beforeResolve

  • 路由獨享守衛：在routes中配置

  • 元件內的守衛 可用配置API：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    • beforeRouteEnter:唯一可傳遞next回撥守衛；解決不可訪問this；
    • next（）裡的內容執行時機在元件mounted週期之前；
    • beforeRouteUpdate: 該元件複用時被呼叫

相關文章