原创投稿
  1. 长城号首页
  2. 投稿

router路由器设置怎么清除（cisco路由器设置步骤图）

长城号SEO专员 • • 投稿

Vue Router 基础

让我们先来了解下Vue Router的简单使用吧，先了解怎么使用，之后再去想办法怎么去实现

1.简介

路由：本质上是一种对应关系

分类分为前端路由和后端路由

后端路由

比如node.js 的路由是 URL的请求地址和服务器上面的资源对应，根据不同的请求地址返回不同的资源

前端路由

在SPA（单页应用）中根据用户所触发的事件改变了URL 在无需刷新的前提下 显示不同的页面内容，比如等下就要讲的Vue Router

2.Vue-Router最基础的使用步骤

2.1.引入Vue-Router文件

<!-- 使用vue router前提 vue 必不可少 -->
<script src="./js/vue.js"></script>
<!-- 引入vue-router文件 -->
<script src="./js/vue-router_3.0.2.js"></script>

2.2.在页面上添加 router-link 和 router-view

<!-- 添加路由 -->
<!-- 会被渲染为 <a href="#/home"></a> -->
<router-link to="/home">Home</router-link>
<router-link to="/login">Login</router-link>
<!-- 展示路由的内容 -->
<router-view></router-view>

2.3.创建路由组件

//创建路由组件
const home = {
 template: `
<div>欢迎来到{{name}}</div>
`,
  data() {
   return {
    name: '首页',
   }
  },
}

const login = {
 template: `
  <div>欢迎来到登录页</div>
	`,
}

2.4.配置路由规则

// 配置路由规则
const router = new VueRouter({
 routes: [
  //每一个路由规则都是一个对象
  //path 路由的 hash地址
  //component 路由的所展示的组件
  {
   path: '/',
   // 当访问 '/'的时候 路由重定向 到新的地址 '/home'
   redirect: '/home',
   },     
   {
     path: '/home',
     component: home,
    },
    {
     path: '/login',
     component: login,
    },
   ],
})

2.5.挂载路由

let vm = new Vue({
 el: '#app',
 data: {},
 methods: {},
  // 挂载到vue 上面
 router,
 })
从使用到自己实现简单Vue Router看这个就行了

3.嵌套路由

这里的嵌套路由是基于上面的例子继续写的

3.1.在路由里面添加 子路由链接和 占位符

//创建路由组件
const home = {
    template: `
    <div>
    欢迎来到首页
    <br>
    <!-- 子路由链接 -->
    <router-link to="/tab1">Tab1</router-link>
    <router-link to="/tab2">Tab2</router-link>

    <!-- 子路由展示 -->
    <router-view></router-view>
    </div>
}
复制代码

3.2.添加路由组件

// 创建两个子路由组件
const tab1 = {
    template: `
    <div>
    子路由1
    </div>
    `,
}
const tab2 = {
    template: `
    <div>
    子路由2
    </div>
    `,
}
复制代码

3.3.配置路由规则

// 配置路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/home',
            component: home,
            //children 表示子路由规则
            children: [
                { path: '/tab1', component: tab1 },
                { path: '/tab2', component: tab2 },
            ],
        },
    ],
})
复制代码
从使用到自己实现简单Vue Router看这个就行了

4.动态路由

path属性加上/:id 使用route对象的params.id获取动态参数

比如现在有这么多个路由，如果自己也配置多个路由，岂不是有点。。。多余

<div id="app">
    <!-- 添加路由 -->
    <!-- 会被渲染为 <a href="#/home"></a> -->
    <router-link to="/goods/1">goods1</router-link>
    <router-link to="/goods/2">goods2</router-link>
    <router-link to="/goods/3">goods3</router-link>
    <router-link to="/goods/4">goods4</router-link>
    <!-- 展示路由的内容 -->
    <router-view></router-view>
</div>

然后这里就可以使用 动态路由来解决

<script>
    //创建路由组件
    const goods = {
        // this.$route.parms.id 可以省略 this
        template: `
        <div>欢迎来到商品 {{$route.params.id}}页</div>
        `,
        }
    // 配置路由规则
    const router = new VueRouter({
        routes: [
            {
                // 加上`/:id`
                path: '/goods/:id',
                component: goods,
            },
        ],
    })
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        // 挂载到vue 上面
        router,
    })
</script>
从使用到自己实现简单Vue Router看这个就行了

最后提一下还可以用query进行传参.

// 比如
<router-link to="/goods?id=1">goods</router-link>
复制代码

然后使用this.$route.query.id就可以在路由组件中获取到id

添加动态路由

使用 this.$router.addRoutes([]) 可以添加动态路由,里面传递是一个数组 和 routes里面一样

5.路由传参

我们可以使用 props 进行传值

为啥要用 props 进行传值，route不香了吗，确实route 不够灵活

props 值有三种情况

5.1.布尔值类型

//创建路由组件
const goods = {
    // 使用props接收
    props: ['id'],
    template: `
    <div>欢迎来到商品 {{id}}页</div>
    `,
}
// 配置路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/goods/:id',
            component: goods,
            //props为true, route.params将会被设置为组件属性
            props: true,
        },
    ],
})
复制代码

5.2.对象类型

但是这里就获取不到 id 了，会报错

这里的id 需要 $route.params.id 获取

const goods = {
    // 使用props接收
    props: ['name', 'info', 'id'],
    // 这里的 id 是获取不到的
    template: `
    <div>{{info}}来到{{name}} {{id}}页</div>
    `,
}
// 配置路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/goods/:id',
            component: goods,
            //props为对象 就会把这个对象传递的路由组件
            //路由组件使用props接收
            props: {
                name: '商品',
                info: '欢迎',
            },
        },
    ],
})
复制代码

5.3.函数

const goods = {
    // 使用props接收
    props: ['name', 'info', 'id'],
    template: `
    <div>{{info}}来到{{name}} {{id}}页</div>
    `,
}
// 配置路由规则
const router = new VueRouter({
    routes: [
        {
            path: '/goods/:id',
            component: goods,
            //prop是一个函数的话 就可以组合传值
            props: (route) => {
                return {
                    name: '商品',
                    info: '欢迎',
                    id: route.params.id,
                }
            },
        },
    ],
})
复制代码

6.route 和 router

在上面提到了route 那么和 router有什么区别呢

  • route为当前router跳转对象里面可以获取path，params，hash，query，fullPath，matched，name
  • router为VueRouter实例用 new VueRouter创建的实例，想要导航到不同URL，则使用router.push方法
  • routes是router路由实例用来配置路由对象（顺带提一下）

7.命名路由

路由组件

//创建路由组件
const goods = {
    // 使用props接收
    props: ['id'],
    template: `
    <div>商品{{id}}页</div>
    `,
}
复制代码

路由配置

//配置路由
const router = new VueRouter({
    routes: [
        {
            path: '/goods/:id',
            // 命名路由
            name: 'goods',
            component: goods,
        },
    ],
})
复制代码

绑定 :to 通过name找到定义的路由 还可以使用 params 传递参数

<router-link :to="{name: 'goods', params: { id: 1 } }">goods1</router-link>
<!-- 展示路由的内容 -->
<router-view></router-view>
复制代码

8.编程式导航

8.1.声明式导航

既然提到了编程式导航，那么先简单说下声明式导航

上面所展示的都是声明是导航 比如router-link

<router-link to=”/goods/1″>goods1</router-link>

还有a标签

<a href=”#/goods/1″>goods1</a>

8.2.编程式导航

使用javaScript来控制路由跳转

在普通的网页中使用 loaction.href window.open 等等进行跳转

现在我要介绍的是Vue Router中的编程式导航

我们平时都是用router.push() **router.go(n)**方法进行跳转

//字符串
this.$router.push('/home')

//对象
this.$ruter.push({path:'/home'})

//比如这个 /goods?id=1
this.$router.push({path:'/goods',query:{id:'1'}})

//命名路由 /goods/1
this.$router.push({name:'goods',params:{id:1}})

//后退
this.$router.go(-1)
复制代码

9.路由守卫

9.1.全局守卫

router.beforeEach 全局守卫 对所有的路由都起作用

router.beforeEach((to, from, next) => { 
      next();//使用时,千万不能漏写next!!!
    }).catch(()=>{
      //跳转失败页面
      next({ path: '/error', replace: true, query: { back: false }}
    )
})
复制代码

全局的守卫的三个参数

to: 即将要进入的目标 路由对象

from: 当前导航正要离开 路由对象

next: 参数不同做的事也不同

next() 直接进入下一个钩子

next(false) 停止当前导航

next(‘/路径’) 跳转到path路由地址 当然这里面也可以写成对象形式 next({path : ‘/路径’}) next(error): 如果传入参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()

9.2.路由独享的守卫

beforeEnter 路由对象独享的守卫写在routes里面

const router = new VueRouter({
  routes: [
    {
      path: '/goods',
      component: goods,
      beforeEnter: (to, from, next) => {
        // 一样的用法
      }
    }
  ]
})
复制代码

9.3.组件内的守卫(了解)

组件内的守卫 写在组件内部 下面是官方介绍

  • beforeRouteEnter 进入路由前,组件还没有被实例化所以这里无法获取到this
  • beforeRouteUpdate (2.2) 这个阶段可以获取this,在路由复用同一个组件时触发
  • beforeRouteLeave 这个阶段可以获取this,当离开组件对应的路由时,此时可以用来保存数据,或数据初始化,或关闭定时器等等
const goods = {
  template: `<div>goods</div>`,
  beforeRouteEnter (to, from, next) {
    // 具体逻辑
  },
  beforeRouteUpdate (to, from, next) {
    // 具体逻辑
  },
  beforeRouteLeave (to, from, next) {
    // 具体逻辑
  }
}
复制代码

10.组件缓存keep-alive

页面重新加载会重新渲染页面比如回退的时候等等，我们有的组件它不是一个活动的(数据不变)不希望它被重新渲染，所以这里就可以使用 <keep-alive> </keep-alive> 包裹起来，这样就不会触发created钩子

应用场景：获取一个商品的详情然后回退在前进的时候就使用缓存，提高性能

10.1.不使用 keep-alive例子

这里home 组件在created进行打印当前的时间

<div id="app">
    <router-link to="/home">home</router-link>
	<router-link to="/login">login</router-link>

	<router-view></router-view>
</div>
复制代码
<script>
      const login = {
        template: `
        <div>Login</div>
        `,
      }
      const home = {
        template: `
        <div>Home</div>
        `,
        created() {
          console.log(new Date())
        },
      }
      const router = new VueRouter({
        routes: [
          {
            path: '/',
            redirect: '/home',
          },
          {
            path: '/home',
            component: home,
          },
          {
            path: '/login',
            component: login,
          },
        ],
      })
      let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router,
      })
  </script>
复制代码
从使用到自己实现简单Vue Router看这个就行了

如上，每切换home 的路由 组件就会重新渲染，打印当前的时间

如果使用 keep-alive 会有什么效果呢

10.2.使用keep-alive

这里只需简单的包裹起来就行了

<div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/login">login</router-link>

    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</div>
复制代码
从使用到自己实现简单Vue Router看这个就行了

可以看到的是只打印一次，说明切换了路由它并没有重新渲染组件

当然可以在 组件内取个name名字 keep-alive 标签里面添加 include 属性就可以对相应的组件进行缓存

const login = {
    name: login,
    template: `
    <div>Login</div>
    `,
}
const home = {
    name: home,
    template: `
    <div>Home</div>
    `,
    created() {
    	console.log(new Date())
    },
}
复制代码
<div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/login">login</router-link>

    <keep-alive include="login,home">
        <router-view></router-view>
    </keep-alive>
</div>
复制代码

10.3.activated 和 deactivated

keep-alive 生命周期执行顺序

第一次访问路由时：

  • created–>mounted –>activated
  • deactivated在退出后触发

以后进入只会触发 activated

11.hash 和 history 模式

11.1.hash模式

在vue-router中默认使用的是 hash 模式

hash是url中的锚点就是**#,通过锚点作为路由地址,我们通常改变的是改变#**后面部分,实现浏览器渲染指定的组件.,锚点发生改变会触发 onhashchange 事件

11.2.history模式

history 模式就是平时正常的地址，使用方面需要服务器支持

如果访问的路径资源没有 直接就是 404

在HTML5后新增了两个API

pushState(): IE10后支持

replaceState()

在vue-router中如果要使用 history 模式需要指定

const router = new VueRouter({
  mode: 'history'
})
复制代码

实现一个基础 Vue Router

复习上面的路由的基础那么我们不如来写个Vue Router吧

实现的这个 Vue Router是基于 history模式

所有的步骤都放到代码的注释中，每一行都写个注释

这个简单的没有按照Vue Router源码来写主要是一些基础功能的实现

为后面的按照源码写打基础

1.注册全局Vue Router

首先就是先注册自己的 Vue Router

判断是否注册了组件

在Vue实例创建完成进行注册

// 保存一个全局变量 Vue
let _Vue = null

// 默认导出自己写的 VueRouter
export default class MyVueRouter {
  // 实现install 注册 MyVueRouter vue提供install可供我们开发新的插件及全局注册组件等
  // 把Vue传进去
  static install(Vue) {
    // 定义一个标识判断是否注册了 MyVueRouter ,注册了就不用下一步了
    if (MyVueRouter.install.installed) return
    // 没有就进行下面的，把标识改变true
    MyVueRouter.install.installed = true
    // 把全局变量 _Vue 保存
    _Vue = Vue
    // 为了获取Vue中的this执行这里使用 混入
    _Vue.mixin({
      // 在Vue实例创建好的时候进行操做
      beforeCreate() {
        // 判断是否是实例创建还是组件创建 ,可以判断是否挂载 了router
        if (this.$options.router) {
          // 把router注册到 _Vue上
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
}
复制代码

2.实现 构造方法

optoins 保存传入的规则

routerMap 确定地址和组件的关系

current 表示当前的地址是响应式的之后渲染组件和它相关

export default class MyVueRouter {
  ...
  //实现构造
  constructor(optoins) {
    // 这个保存的是  routes
    this.optoins = optoins
    // routerMap 保存路由和 组件之间的关系
    this.routerMap = {}
    // 用来记录数据 这里面的数据都是 响应式
    this.data = _Vue.observable({
      // 当前路由的地址
      current: '/',
    })
  }
}
复制代码

3.解析路由规则

传入的路由规则拿到一个对象里 地址 和 组件一一匹配

export default class MyVueRouter {
  ...
  // 解析路由规则
  createRouterMap() {
    // 把之前构造函数的中的传入的 routes 规则进行遍历
    this.optoins.routes.forEach((item) => {
      // 把路由 和 组件的对应关系添加到 routerMap中
      this.routerMap[item.path] = item.component
    })
  }
}
复制代码

4.实现 router-link 组件

router-link就是页面上所展示的路由链接

因为一般使用的基本都是运行版的Vue 所以自己把组件转为 虚拟DOM

还有就是链接会刷新的问题

自己写个函数进行跳转阻止默认事件

还得注意对应的路由所要渲染的组件

export default class MyVueRouter {
  ...
  // 实现组件
  initComponents(Vue) {
    // 实现 router-link组件
    Vue.component('router-link', {
      props: {
        // router-link上面的to属性将访问的地址
        to: String,
      },
      // 由于运行版的Vue不能渲染template所以这里重新写个render 这里h 也是个函数
      // template: `<a :href="to"><slot></slot></a>`,
      render(h) {
        // 第一个参数是标签
        return h(
          'a',
          // 第二个参数是对象是 tag 里面的属性
          {
            // 设置属性
            attrs: {
              href: this.to,
            },
            // 绑定事件
            on: {
              // 重新复写点击事件,不写的话会点击会向服务器发送请求刷新页面
              click: this.myClick,
            },
          },
          // 这个是标签里面的内容 这里渲染是 默认插槽
          [this.$slots.default]
        )
      },
      methods: {
        //router-link的点击事件
        myClick(e) {
          // 因为我这里是模拟是 history的路由所以用pushState ，hash路由可以这里用 push
          // 使用history修改浏览器上面的地址
          // pushState 第一个参数是传递的参数,第二个是标题，第三个是链接
          history.pushState({}, '', this.to)
          // 渲染相应的组件
          // 渲染的页面也需要改变 data中的current是响应式的 router-view是根据current来渲染的
          this.$router.data.current = this.to
          // 阻止默认跳转事件
          e.preventDefault()
        },
      },
    })
复制代码

5.实现 router-view 组件

这里从之前解析的规则里面拿到当前的对应的组件进行转为虚拟DOM

最后router-view占位渲染到页面上

export default class MyVueRouter {
  ...
  // 实现组件
  initComponents(Vue) {
    // 实现 router-view组件
    Vue.component('router-view', {
      render(h) {
        // 获取的当前路径所对应的组件
        // 因为当前this是Vue,this.$router才是MyVueRouter
        const component = this.$router.routerMap[this.$router.data.current]
        // 转化为虚拟Dom
        return h(component)
      },
    })
  }
}
复制代码

6.前进和后退

在完成之前的编写还是不够的，因为在浏览器点后退和前进虽然改变了浏览器的地址，但是组件却没有刷新，下面就来解决这个问题

export default class MyVueRouter {
  ...
  // 初始化事件
  initEvent() {
    // 监听浏览器地址的改变
    window.addEventListener('popstate', () => {
      // 改变VueRouter的当前的地址 重新渲染组件
      this.data.current = window.location.pathname
    })
  }
}
复制代码

7.在router挂载后进行初始化

最后写个函数进行初始化

在router注册到Vue之后进行 初始化

export default class MyVueRouter {
  // 初始化
  init() {
    // 解析路由规则
    this.createRouterMap()
    // 初始化组件
    this.initComponents(_Vue)
    // 初始化事件
    this.initEvent()
  }
    
  static install(Vue) {
    if (MyVueRouter.install.installed) return
    MyVueRouter.install.installed = true
    _Vue = Vue
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          // 注册完router后进行初始化
          this.$options.router.init()
        }
      },
    })  
  }
  ...
}

复制代码

8.放上完整的 index.js

// 保存一个全局变量 Vue
let _Vue = null

export default class MyVueRouter {
  // 实现install 注册 MyVueRouter vue提供install可供我们开发新的插件及全局注册组件等
  // 把Vue传进去
  static install(Vue) {
    // 定义一个标识判断是否注册了 MyVueRouter ,注册了就不用下一步了
    if (MyVueRouter.install.installed) return
    // 没有就进行下面的，把标识改变true
    MyVueRouter.install.installed = true
    // 把全局变量 _Vue 保存
    _Vue = Vue
    // 为了获取Vue中的this执行这里使用 混入
    _Vue.mixin({
      // 在Vue实例创建好的时候进行操做
      beforeCreate() {
        // 判断是否是实例创建还是组件创建 ,可以判断是否挂载 了router
        if (this.$options.router) {
          // 把router注册到 _Vue上
          _Vue.prototype.$router = this.$options.router
          // 注册完router后进行初始化
          this.$options.router.init()
        }
      },
    })
    // 判断是否挂载
  }
  // 实现构造方法
  constructor(optoins) {
    // 这个保存的是  routes
    this.optoins = optoins
    // routerMap 保存路由和 组件之间的关系
    this.routerMap = {}
    // 用来记录数据 这里面的数据都是 响应式
    this.data = _Vue.observable({
      // 当前路由的地址
      current: '/',
    })
  }
  // 解析路由规则
  createRouterMap() {
    // 把之前构造函数的中的传入的 routes 规则进行遍历
    this.optoins.routes.forEach((item) => {
      // routes中的每一项都是一个对象 { path: '/XXX', component: XXX}
      // 把路由 和 组件的对应关系添加到 routerMap中
      this.routerMap[item.path] = item.component
    })
  }
  // 实现组件
  initComponents(Vue) {
    // 实现 router-link组件
    Vue.component('router-link', {
      props: {
        // router-link上面的to属性将访问的地址
        to: String,
      },
      // 由于运行版的Vue不能渲染template所以这里重新写个render 这里h 也是个函数
      // template: `<a :href="to"><slot></slot></a>`,
      render(h) {
        // 第一个参数是标签
        return h(
          'a',
          // 第二个参数是对象是 tag 里面的属性
          {
            // 设置属性
            attrs: {
              href: this.to,
            },
            // 绑定事件
            on: {
              // 重新复写点击事件,不写的话会点击会向服务器发送请求刷新页面
              click: this.myClick,
            },
          },
          // 这个是标签里面的内容 这里渲染是 默认插槽
          // 比如<router-link to="/">首页</router-link>
          // 插槽就是给首页两个字留位置,当前这只是个例子
          [this.$slots.default]
        )
      },
      methods: {
        //router-link的点击事件
        myClick(e) {
          // 因为我这里是模拟是 history的路由所以用pushState ，hash路由可以这里用 push
          // 使用history修改浏览器上面的地址
          // pushState 第一个参数是传递的参数,第二个是标题，第三个是链接
          history.pushState({}, '', this.to)
          // 渲染相应的组件
          // 渲染的页面也需要改变 data中的current是响应式的 router-view是根据current来渲染的
          this.$router.data.current = this.to
          // 阻止默认跳转事件
          e.preventDefault()
        },
      },
    })
    // 实现 router-view组件
    Vue.component('router-view', {
      render(h) {
        // 获取的当前路径所对应的组件
        // 因为当前this是Vue,this.$router才是MyVueRouter
        const component = this.$router.routerMap[this.$router.data.current]
        // 转化为虚拟Dom
        return h(component)
      },
    })
  }
  // 初始化事件
  initEvent() {
    // 监听浏览器地址的改变
    window.addEventListener('popstate', () => {
      // 改变VueRouter的当前的地址 重新渲染组件
      this.data.current = window.location.pathname
    })
  }

  // 初始化
  init() {
    // 解析路由规则
    this.createRouterMap()
    // 初始化组件
    this.initComponents(_Vue)
    // 初始化事件
    this.initEvent()
  }
}
复制代码

到了这里基础的实现功能差不多了，上面的例子是为了下面打基础，所有的功能实现基本都是在一个文件下很不严谨，下面就严格按照Vue Router 源码来实现自己 Vue Router

Vue Router实现

经过上面简单的实现，现在我们按照Vue Router源码的方式进行编写

1.首先是Vue Router 构造

/* index.js */

// 导出自己写的 VueRouter
export default class VueRouter {
  // 实现构造函数功能
  constructor(options) {
    // 获取options中的routes路由规则 没有就为空数组
    this._options = options.routes || []
  }
  // 初始化
  init(Vue) {}
}
复制代码

2.注册组件 install

在 install.js 对自己写的Vue-Router进行全局的注册

之后还会在这里创建 router∗∗∗∗router** **router∗∗∗∗route

还有注册 router-link router-view

/* install.js */

// 定义一个全局 的Vue
export let _Vue = null

// 导出 install方法
export default function install(Vue) {
  // 保存到全局的Vue
  _Vue = Vue
  // 混入
  _Vue.mixin({
    // Vue实例创建完毕之后操做
    beforeCreate() {
      // 这里是new Vue
      if (this.$options.router) {
        // 保存 Vue
        this._routerRoot = this
        // 保存 Vue Router 的实例，以后可以通过Vue Router构造的一些方法
        this._router = this.$options.router
        // 调用Vue Router的init(Vue) 初始化操做
        this._router.init(this)
      } else {
        // 这里是创建 Vue的组件等等
        // 判断是否有父组件 ，有的话就把父组件的 _roterRoot(也就是Vue)给 子组件
        // 没有父组件就把 this 这是也是(Vue) 给子组件
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
    },
  })
}
复制代码

然后在 index.js中导入install 进行为构造添加 install

// 导入 install
import install from './install'

// 导出自己写的 VueRouter
export default class VueRouter {
	...
}
    
// 为VueRouter 添加 install方法
VueRouter.install = install
复制代码

3.编写 create-route-map.js

这个主要的作用就是用来解析传递过来的路由 需要导出然后在 create-matcher.js进行使用

具体的细节都写了注释

/* create-route-map.js */

// 导出具体的路由解析
/**
 *
 * @param {*} routes 路由规则
 * @param {*} oldPathList 路由列表
 * @param {*} oldPathMap 路由和组件的对应关系
 */
export default function createRouteMap(routes, oldPathList, oldPathMap) {
  // 传入了就是添加动态路由 没有传入就默认为空
  const pathList = oldPathList || []
  const pathMap = oldPathMap || []

  // 遍历规则操作
  routes.forEach((route) => {
    // 记录路由 也是核心的解析路由 为了分工明确写的外面
    addRouteRecord(route, pathList, pathMap)
  })

  // 返回新的路由列表 和 路由对应关系
  return {
    pathList,
    pathMap,
  }
}

/**
 *
 * @param {*} route 路由规则
 * @param {*} pathList 路由列表
 * @param {*} pathMap 路由和组件之间的对应关系
 * @param {*} parentRecord  父路由
 */
function addRouteRecord(route, pathList, pathMap, parentRecord) {
  // 路由地址 判断是否存在父级的路由 有的话拼接父级路由和当前路由的path 没有就是当前route.path
  const path = parentRecord ? `${parentRecord.path}/${route.path}` : route.path
  // record作为一个路由记录 记录了路由地址,组件,父级路由   用于路由对应关系去对应相对应的path
  const record = {
    path,
    component: route.component,
    parent: parentRecord,
  }
  // 判断是否在路由列表中 存在当前路由，不存在进行添加当前路由，更新路由列表
  if (!pathList[path]) {
    // 向路由列表中添加路由
    pathList.push(path)
    // 向路由对应关系中 添加path 相对应的记录
    pathMap[path] = record
  }
  // 判断当前的 路由是否有子路由，有的话进行递归
  if (route.children) {
    route.children.forEach((childRoute) => {
      // 就简单说下最后一个参数 就是父级路由记录
      addRouteRecord(childRoute, pathList, pathMap, record)
    })
  }
}
复制代码

4.编写 create-matcher.js

这个模块的意义也是解析路由不过这个是个指挥家，上面实现的是具体解析操作

在这个模块里进行调用上面的具体解析路由的方法就行了

有了上面面具体的路由解析，这个create-matcher.js就容易实现了，只需要简单的调用它即可

这个模块返回了两个方法

match : 根据路由路径创建路由规则对象，之后就可以通过 规则对象获取到所有的路由信息然后拿到所有的组件进行创建

addRoutes : 添加动态路由

/* create-matcher.js */

// 导入具体的路由解析规则
import createRouteMap from './create-route-map'

// 导出解析路由规则 传入的是规则
export default function createMatcher(router) {
  // pathList 路由的列表  pathMap 路由与组件的对应关系 nameMap这里没有考虑，先完成个简单的
  // 具体的解析规则是使用  createRouteMap
  const { pathList, pathMap } = createRouteMap(router)
  // match是 从pathMap 根据path获取 相应的路由记录
  function match(path) {
      //待实现
  }
  // 添加动态路由
  function addRoutes(router) {
    // 添加动态路由肯定也要解析路由规则
    createRouteMap(router, pathList, pathMap)
  }
  // 返回match 和 addRoutes
  return {
    match,
    addRoutes,
  }
}
复制代码

然后在index.js也就是Vue Router的构造中使用 createMatcher. 使用this.matcher接收

// 导入 install
import install from './install'
// 导入解析路由
import createMatcher from './create-matcher'

// 导出自己写的 VueRouter
export default class VueRouter {
  // 实现构造函数功能
  constructor(options) {
    // 获取options中的routes路由规则 没有就为空数组
    this._routes = options.routes || []
    // 解析路由 传入规则 这里还返回了两个方法 match,addRoutes 用matcher接收一下之后有用
    this.matcher = createMatcher(this._routes)
  }
  // 初始化
  init(Vue) {}
}
// 为VueRouter 添加 install方法
VueRouter.install = install

复制代码

5.编写 createMatcher

看见上面在 createMatcher中定义了 一个match了吗，

match是 从pathMap 根据path获取 相应的路由记录

上面还没有去实现，现在来实现它

需要实现它的话还需要编写个 createRoute 方法，我这里写在 uitl/route.js模块里

/* util/route.js */

// 导出 createRoute
/**
 *
 * @param {*} record 传过来的记录
 * @param {*} path 路由地址
 * @returns
 */
export default function createRoute(record, path) {
  // 保存路由的记录 里面可能有多个路由 是这种模式保存 [parentRecord,childRecord]
  const matched = []
  // 判断是否是子路由
  // 下面 record = record.parent 在不断向上找parent有继续执行
  // 没有就直接return 下面的对象
  while (record) {
    // 循环得到的 record不断插入到 数组的最前面
    matched.unshift(record)
    // 把父记录给当前record 继续循环
    record = record.parent
  }
  // 返回path 和 matched 以便之后 router-view渲染
  return {
    path,
    matched,
  }
}
复制代码

上面编写了 createRoute方法我们就可以在 create-mathcer.js 调用 来获取到记录了

然后再 create-mathcer.js中继续 完善 match方法

/* create-matcher.js */

// 导入具体的路由解析规则
import createRouteMap from './create-route-map'
// 导入 createRoute
import createRoute from './util/route'

// 导出解析路由规则 传入的是规则
export default function createMatcher(router) {
  // pathList 路由的列表  pathMap 路由与组件的对应关系 nameMap这里没有考虑，先完成个简单的
  // 具体的解析规则是使用  createRouteMap
  const { pathList, pathMap } = createRouteMap(router)
  // match是 从pathMap 根据path获取 相应的路由记录
  function match(path) {
    // 取出path对应的记录
    const record = pathMap[path]
    // 判断记录是否存在
    if (record) {
      return createRoute(record, path)
    }
    return createRoute(null, path)
  }
  // 添加动态路由
  function addRoutes(router) {
    // 添加动态路由肯定也要解析路由规则
    createRouteMap(router, pathList, pathMap)
  }
  // 返回match 和 addRoutes
  return {
    match,
    addRoutes,
  }
}
复制代码

6.历史记录的处理 History

在 history目录下新建一个 base模块用来编写 父类

这个父类有 hash 模式 和 history(html5) 模式共同的方法

这里就主要演示下 hash 模式的代码

/* history/base.js */

// 导入 我们上面写好的 createRoute
import createRoute from '../util/route'

// 导出 History
export default class History {
  // router 是路由对象 也就是 VUe-Router的一个实例
  constructor(router) {
    // 赋值给自己的 router
    this.router = router
    // 默认的的当前路径为 /
    this.current = createRoute(null, '/')
  }
  // 将要跳转的链接
  // path 是路由的地址, onComplete是一个回调
  transitionTo(path, onComplete) {
    // 获取当前的应该跳转的路由  调用的是 Vue-Router中 this.matcher中收到的match方法
    // 在这里 this.router就是 Vue-Router的一个实例 所以写成
    // this.router.matcher.match(path)
    this.current = this.router.matcher.match(path)
    // 回调存在触发回调
    onComplete && onComplete()
  }
}
复制代码

编写 HashHistory 模式 继承 History

/* /history/hash */

// 导入 base中的 History
import History from './base'

// 继承了 History
export default class HashHistory extends History {
  constructor(router) {
    super(router)
    // 确保第一次访问的时候路由加上 #/
    ensuerSlash()
  }
  // 监听URL的改变 设置当前的current
  setUpListener() {
    // 监听 hash的变化
    window.addEventListener('hashchange', () => {
      // 改变 this.current
      this.transitionTo(this.getCurrentLocation())
    })
  }
  // 获取当前的URL的hash 当然这里要去除 #
  getCurrentLocation() {
    // 这里不建议写成这个 return window.location.hash.slice(1) 有兼容问题
    let href = window.location.href
    const index = href.indexOf('#')
    // 当没有 #的时候 直接返回 空字符串
    if (index < 0) return ''
    // 获取 #后面的地址
    href = href.slice(index + 1)
    return href
  }
}

// 确保第一次加上 #/
function ensuerSlash() {
  // 如果存在 hash的话就不行加 /
  if (window.location.hash) {
    return
  }
  // 如果没有hash值 只要给 hash 加上一个 / 它会自动加上 /#/
  window.location.hash = '/'
}
复制代码

关于 html5模式 这里 就没写了

然后回到 index.js 就是自己写的 Vue Router中继续编写模式判断

最后就是 初始化 init方法

/* index.js */

// 导入 install
import install from './install'
// 导入解析路由
import createMatcher from './create-matcher'
// 导入 HashHistory
import HashHistory from './history/hash'
// 导入 HTML5History
import HTML5History from './history/html5'

// 导出自己写的 VueRouter
export default class VueRouter {
  // 实现构造函数功能
  constructor(options) {
    // 获取options中的routes路由规则 没有就为空数组
    this._routes = options.routes || []
    // 解析路由 传入规则 这里还返回了两个方法 match,addRoutes 用matcher接收一下之后有用
    this.matcher = createMatcher(this._routes)
    // 获取模式 没有就默认为 hash 模式
    this.mode = options.mode || 'hash'
    // 使用 if 或者 分支都行 根据不同的模式执行不同的路由跳转功能等等
    switch (this.mode) {
      case 'history':
        this.history = new HTML5History(this)
        break
      case 'hash':
        // 模式的实例使用 this.history接收等下用的上
        // 传入的this是 VueRouter
        this.history = new HashHistory(this)
        break
      default:
        throw new Error('该模式不存在')
    }
  }
  // 初始化
  init(Vue) {
    // 拿到模式的实例
    const history = this.history
    // 进行跳转  第一个参数是path ,第二个是回调函数
    history.transitionTo(history.getCurrentLocation, () =>
      // 监听URL的改变 设置当前的 this.current
      history.setUpListener()
    )
  }
}
// 为VueRouter 添加 install方法
VueRouter.install = install
复制代码

7.定义一个响应值 _route

渲染不同路由页面有个前提的就是需要一个表示 当前路由 响应式的属性

所以我们来到 install.js 添加一个响应式的 属性**_route**

和这个无关的代码 …省略

/* install.js */

export let _Vue = null

export default function install(Vue) {
  _Vue = Vue
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        ...
        // 创建一个代表当前路由 响应式的值_route
        // 其实不建议使用 defineReactive直接创建。。
        // 第一个参数是绑定在谁身上，第二是值名称，第二个是值
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        ...
      }
    },
  })
}
复制代码

然后得回到 history下面的 base 添加一个修改响应式 _route的值的回调 this.cb

/* history/base.js */

import createRoute from '../util/route'

export default class History {
  constructor(router) {
    ...
    // cb 一个回调函数，它的作用就是修改 响应式路由的值_route ，对应的视图然后就刷新
    this.cb = null
  }
  // 通过 listen来修改 cb的值
  listen(cb) {
    this.cb = cb
  }

  transitionTo(path, onComplete) {
	...
    // cb 存在就修改响应式路由的值
    this.cb && this.cb(this.current)
	...
  }
}
复制代码

最后在 index.js 的 init 调用 listen 方法 传入回调修改 响应式值**_route**

/* index.js */

...

export default class VueRouter {
  ...
  init(Vue) {
    ...
    // 修改 响应式的 route
    history.listen((route) => {
      Vue._route = route
    })
  }
}
...

复制代码

8.添加 $router 和 $route

我们知道在 Vue Router 提供了 $router (这个是路由对象是**Vue Router**的实例) 还有 $route(路由规则对象)

我们自己可以来到 install.js 中进行 添加这两个属性

/* install.js */

...
export default function install(Vue) {
  ...
  // 添加 $router 路由对象  Object.defineProperty 参数分别是 为谁添加，属性名，属性值
  Object.defineProperty(Vue.prototype, '$router', {
    get() {
      // this._routerRoot代表的是 Vue ,他的_router是 Vue Router实例
      // 可以回过去看看第二点
      return this._routerRoot._router
    },
  })
  // 添加 $route
  Object.defineProperty(Vue.prototype, '$route', {
    get() {
      // 他的_route是就是刚才添加 响应式 的当前 路由
      return this._routerRoot._route
    },
  })
}
复制代码

9.router-link

基本的介绍就不多说了，之前也是有介绍的。然后现在重新来实现下

在 components 文件下新建 link.js

/* ./components/link.js */

// 导出 link
export default {
  props: {
    to: {
      type: String,
      required: true,
    },
  },
  // 渲染
  render(h) {
    // 转化为虚拟DOM
    return h(
      // 标签名
      'a',
      // 标签属性
      {
        domProps: {
          href: '#' + this.to,
        },
      },
      // 标签里面的内容 这里是 默认插槽
      [this.$slots.default]
    )
  },
}
复制代码

10.router-view

在 components 文件下新建 view.js 具体步骤干了什么都写在注释里了

/* ./components/link.js */

// 导出 view
export default {
  render(h) {
    // 获取路由规则对象
    const route = this.$route
    // 定义一个变量，用来等下 取 matched 中的值
    let depth = 0
    // 该组件为 router-view
    this.routerView = true
    // 尝试去获取父组件
    let parent = this.$parent
    // 判断是否有父组件
    while (parent) {
      // 判断该组件是否为 routerView
      if (parent.routerView) {
        depth++
      }
      // 继续向上判断还有无父组件
      parent = parent.$parent
    }
    // 这里的route是 this.$route 就是 _route 响应式值，也就是 current
    // 当初 current 是 调用了 match方法 获取到的 返回值是 matched 和 path
    // matched 里面是多个路由对象 是这种模式保存 [parentRecord,childRecord]
    // 通过 变量depth取出来 举个栗子 ['/login','/login/tab']
    // 因为使用的unshif添加后面的父组件添加到前面
    // depth 一直加 ,直接取出后面即可
    const record = route.matched[depth]
    // 没有记录直接渲染
    if (!record) {
      return h()
    }
    // 有的话就获取记录中的组件
    const component = record.component
    // 最后把组件渲染
    return h(component)
  },
}

复制代码

好了到了这里 Vue Router的第二次编写就完成了，虽然和官方的差距很大。。额，因为这里是简化写的

11.文件目录

忘了最后贴上文件的目录

从使用到自己实现简单Vue Router看这个就行了

这个模拟Vue Router的demo 放在了 github,有需要的可以这里 MyVueRouter

到了这里也只是仅仅实现了 VueRouter的一小部分功能

但是大体上的功能都差不多实现了，嵌套路由 添加动态路由也实现了

其实我觉得到这里了也可以了,不过还是得继续加油学习

赞 (0)
长城号SEO专员长城号SEO专员管理员
0 0

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发表评论

登录后才能评论