vue路由的实现原理

vue路由的实现

1. 控制地址栏改变
2. 根据地址栏的改变切换组件

hash路由的实现

Demo

components 里面的三个组件内容只是做了简单的描述

<template>
  <div>
    这里是home
  </div>
</template>

App.vue

<!--
这里的router-link、router-view标签是自定义的组件名.
-->
<template>
  <div id="app">
  	<!-- to:在组件标签上添加自定义 -->
    <router-link to="/recommend">推荐</router-link>
    <router-link to="/home">主页</router-link>
    <router-link to="/rank">排行</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

router 里面的组件

<!-- router-link -->
<template>
  <div>
    <span @click="goTo">
      <!-- 使用slot插槽显示标签中的内容 -->
      <slot></slot>
    </span>
  </div>
</template>

<script>
  // 实现router-link的功能
  export default {
    props: ['to'], // 使用props来接受组件上to的值.
    methods: {
      goTo () {
        // console.log(this.to) // 点击标签上to的值
        window.location.hash = this.to // 点击的时候控制地址栏的改变
      }
    }
  }
</script>

<template>
  <div>
    <!-- 这里是router-view, 根据hash值的改变,来切换组件 -->
    <components :is="componentUrl" />
  </div>
</template>

<script>
  import Recommend from '../components/Recommend.vue'
  import Home from '../components/Home.vue'
  import Rank from '../components/Rank.vue'
  export default {
    components: { Recommend, Home, Rank},
    data () {
      return {
        componentUrl: 'Recommend' // 当前组件
      }
    },
    created () {
      // 添加监听事件hashchange, 监听hash值的改变
      window.addEventListener('hashchange', () => {
        // 取到的hash默认是 #/rank, 我们只需要后面的 /rank.
        let hash = window.location.hash.split('#')[1] // 对数据进行处理
        // 如果不做下面的处理直接赋值会报错
        // 把路径和组件匹配
        let routes = [
          {path: '/recommend',component: 'Recommend'},
          {path: '/home',component: 'Home'},
          {path: '/rank',component: 'Rank'}
        ]
        // 当hash值改变, 匹配hash对应着的组件名
        routes.map((item, index) => {
          /*
            如果routes里面那一项的path = hash接收到的hash值,那就把这一项的组件传
          给componentUrl
          */
          if (item.path === hash) {
            this.componentUrl = item.component
          }
          return item
        })
      })
    }
  }
</script>