手寫vue路由

• 一、簡易demo
• 二、Vue-Router傳參方式
• 三、進階-路由導航

一、簡易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: 該組件復用時被調用