手写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="https://www.cnblogs.com/xsk-walter/p/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'
  }
]

二、动态路由：将给定匹配模式的路由映射到同一个组件，复用一个组件，相对与销毁后重建更高效。

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

四、路由的匹配语法

五、嵌套路由、命名路由

六、编程式导航

七、命名视图：

八、重定向配置

// 通过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

十、不同的历史模式

三、进阶-路由导航

一、导航守卫：vue-router提供的主要是通过跳转或取消的方式守卫导航。

标签 , ,