js笔记框架篇 vue（一）router原理

前面的内容呢，主要是在工作中主要是使用vue的，而这玩意用的久了，一些基础性的东西忘得就差不多了，所以一边复习复习，一边写成博客，加深印象，现在开始也写写的好伙伴vue的文章。

vue-router

前端的小伙伴们，对vue全家桶肯定是不陌生的，就算没用过也应该听过，而vue-router也是构建spa不可缺少的一份子，先简单说说用法。
首先使用命令行工具
npm：

		npm install vue-router

yarn:

		yarn add vue-router

我的习惯是在根目录下建新一个router.js

import Vue from 'vue'				// 引入vue
import Router from 'vue-router'		// 引入vue-router
// vue使用Router
Vue.use(Router)
// 引入组件
const Index form '@/view/index'
const About form '@/view/index'
// new一个router实例
const router = new Router({
	mode: 'hash',				// 路由模式还有'history'
	// 定义路由列表
	routes: [
		{
		 	 path: '/',
             name: 'index',
             component: Index,
		},
		{
			path: '/about',
            name: 'about',
            component: About
		}
	]
})

export default router

最后在main.js里引入

import router from './index'

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

当然这只是一个简单的应用，为什么是简单的应用呢，因为我的router解析就只到这里，
ok我们开始解析：

hash模式

首先我们要知道hash路由的底层原理就是hashchange,我还是直接上代码：
html部分

 	<div class="headr-nav">
        <ul>
            <li class="nav-item">
            	<!-- 路由跳转的按钮 -->
                <a href="#/" class="router-link">首页</a>
            </li>
            <li class="nav-item">
                <a href="#/about" class="router-link">关于</a>
            </li>
        </ul>
    </div>
    <!-- 路由页面的容器-->
    <div class="router-view">

    </div>

js部分

// 首先获取路由页面的容器
var routerView = document.getElementsByClassName('router-view')[0];
// 路由跳转的按钮
var routerLink = document.getElementsByClassName('router-link');
// 路由切换的方法
 function changeContent(href) {
     switch (href) {
         case undefined:
             routerView.innerHTML = `<div class="admin">
                 我是首页
             </div>`;
             break;
         case '/':
             routerView.innerHTML = `<div class="admin">
                 我是首页
             </div>`;
             break;
         case '/about':
             routerView.innerHTML = `<div class="about">
                 关于我们
             </div>`;
             break;
     }
 }
 // 页面加载完成后先调用一次
 changeContent(location.hash.split('#')[1]);
 // 监视hashchange事件当hash值变化时调用changeContent方法
 window.addEventListener('hashchange', function (e) {
     var newHref = e.newURL.split('#')[1];
     changeContent(newHref);
 });

ok就这么简单，然后人们发现那个#好丑我们就来看看history模式：

history模式

vue-router的history模式的底层原理是h5中提出的history.pushState，这也是为什么history模式的支持度非常不好，废话不多说，上代码：
html部分

<div class="headr-nav">
        <ul>
            <li class="nav-item">
                <a href="/" class="router-link">首页</a>
            </li>
            <li class="nav-item">
                <a href="/about" class="router-link">关于</a>
            </li>
        </ul>
    </div>
    <div class="router-view">

    </div>

哎呦好像一样
js部分：

		// 首先获取路由页面的容器
		var routerLink = document.querySelectorAll('a');
		// 路由跳转的按钮
        var routerView = document.getElementsByClassName('router-view')[0];
		// 路由切换的方法
        function changeContent(href) {
            switch (href) {
                case '/':
                    routerView.innerHTML = `<div class="admin">
                        我是首页
                    </div>`;
                    break;
                case '/about':
                    routerView.innerHTML = `<div class="about">
                        关于我们
                    </div>`;
                    break;
            }
        }
        // 初始行为
        changeContent(location.pathname);

        for (var i = routerLink.length - 1; i >= 0; i--) {
            routerLink[i].addEventListener('click', function (e) {
            	// 首先要阻止点击的默认事件
                e.preventDefault();
                // 获取到元素的 href值
                var href = e.target.getAttribute('href');
                // 把该值push的地址栏这样可以不发生真正跳转，浏览器访问记录里还会加一条访问记录，主要是可以返回前进
                history.pushState({}, '', href);
                // 调用切换页面方法
                changeContent(href);
            });
        }

注意：history模式要服务器支持，其实呢也很简单，就是无论如何都返回index.html。
服务器代码：

const http = require('http');
const fs = require('fs');
const httpPort = 80;

http.createServer((req, res) => {

  fs.readFile('./vueHistory.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.');
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });

    res.end(content);
  });
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort);
})

ok完成了。
展示连接hash:http://www.fgdemoshow.cn/smallDemo/js/vueRouterHash,
展示连接history:http://www.fgdemoshow.cn/smallDemo/js/vueRouterHistory
github: https://github.com/lifei5859/vue-router-demo.git