vue中路由的实现原理？

vue中路由的实现原理？

1、首先需要了解一下Vue路由分为两种，一种是哈希路由，其最明显的特征是URL地址带‘#’号的，其实对地址栏也就不怎么美观一点。其次是history路由也就是URL不带‘#’号的地址，也就是我们比较常见的地址。
2、为什么要了解Vue路由的实现原理呢？其实我们都知道Vue 构建的单页面应用，其实根据路由地址的不同渲染不同的组件，在无刷新的前提下进行组件切换，根据路由地址切换不同的组件
下面介绍一下简单的例子来了解Vue路由的实现原理
3、在介绍vue实现原理之前
首先来了解一下Vue中的哈希路由的实现原理，其实根本原理涉及到了BOM中的location对象，其中对象中的location.hash储存的是路由的地址、可以赋值改变其URL的地址。而这会触发hashchange事件，而通过window.addEventListener监听hash值然后去匹配对应的路由、从而渲染页面的组件

 location.hash = '/path'  // 无刷新改变地址栏url

<template>
  <div class="about">
    这里是about组件
  </div>
</template>

<script>
export default {

}
</script>

<style>
.about{
  width: 300px;
  line-height: 100px;
  text-align: center;
  background: green;
}
</style>

<template>
  <div class="home">
    这里是home组件
  </div>
</template>

<script>
export default {

}
</script>

<style>
.home{
  width: 300px;
  line-height: 100px;
  text-align: center;
  background: blue;
}
</style>

<template>
  <div class="mine">
    这里是mine组件
  </div>
</template>

<script>
export default {

}
</script>

<style>
.mine{
  width: 300px;
  line-height: 100px;
  text-align: center;
  background: pink;
}
</style>

<template>
  <div id="app">
    <h3>这里是App组件</h3>
    <hr>
    <h4>router-link组件，控制地址栏的改变</h4>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link> |
    <router-link to="/mine">我的</router-link>
    <hr>
    <h4>router-view组件，根据地址栏的改变渲染不同组件</h4>
    <router-view></router-view>
  </div>
</template>

<script>
import RouterLink from './router/router-link'
import RouterView from './router/router-view'
export default {
  name: 'App',
  components: {RouterLink, RouterView}
}
</script>

<style>

以上是三个组件及其路由切换结构、以下组件是添加事件并改变其哈希值的路由地址

<template>
  <!-- 绑定一个组件的点击事件 -->
  <span class="router-link" @click="linkTo">
    <slot></slot>
  </span>
</template>

<script>
export default {
  props: ['to'],
  methods: {
    linkTo () {
      // console.log('要切换的path：'+this.to)
      // 改变地址栏的hash值
      location.hash = this.to
    }
  }
}
</script>

<template>
  <div class="router-view">
  <!-- 根据其条件渲染不同的组件 -->
    <component :is="componentName"></component>
  </div>
</template>

<script>
import Home from '../components/Home'
import About from '../components/About'
import Mine from '../components/Mine'

export default {
  data () {
    return {
      componentName: ''
    }
  },
  components: {Home, About, Mine},
  created () {
    // 监听地址栏的改变
    window.addEventListener('hashchange',()=>{
      // let hash = location.hash // '#/about' -> '/about'
      // let hash = location.hash.substr(1) // '#/about' -> '/about'
      // let hash = location.hash.split('#')[1] // '#/about' -> '/about'
      let hash = location.hash.replace('#','') // '#/about' -> '/about'
      // console.log('hash改变了。。。',hash)
      // 创建路由表
      let routes = [
        {
          path: '/',
          component: 'Home'
        },
        {
          path: '/about',
          component: 'About'
        },
        {
          path: '/mine',
          component: 'Mine'
        }
      ]
      // 匹配路由
      routes.forEach((item)=>{
        if (item.path === hash) {
          this.componentName = item.component
        }
      })
    })
  }
}
</script>

<style>

</style>

因为Vue数据是响应式的，数据变则视图变，从而渲染不同的组件。

以上是本人的对Vue哈希路由的原理的理解，如有不足之处还请大神指点。下次再对history路由的原理的介绍。