Vue Router

Vue Router

Vue Router 是 Vue.js 的官方插件，用来快 速实现单页应用。

单页应用

SPA（Single Page Application）单页面应 用程序，简称单页应用。
指的是网站的 “所有” 功能都在单个页面中进行呈现。
具有代表性的有后台管理系统、移动端、小程序等。

优点：

• 前后端分离开发，提高了开发效率。
• 业务场景切换时，局部更新结构。
• 用户体验好，更加接近本地应用。

缺点：

• 不利于 SEO。
• 初次首屏加载速度较慢。
• 页面复杂度比较高。

前端路由

前端路由，指的是 URL 与内容间的映射关系
URL、内容、映射关系。

Hash 方式

• 通过 hashchange 事件监听 hash 变化，并进行网页内容更新。

 <div>
    <a href="#/">首页</a>
    <a href="#/category">分类页</a>
    <a href="#/user">用户页</a>
  </div>
  <div id="container">
    这是首页功能
  </div>

  <script>
    window.onhashchange = function(){
    
      // 获取url的hash
      // console.log(location.hash)
      var hash = location.hash.replace('#','');
      // 根据不同hash值，更改网页内容
      var str = ''
      switch(hash) {
    
        case '/':
          str = '这是首页的功能';
          break;
        case '/category':
          str = '这是分页的功能';
          break;
        case '/user':
          str = '这是用户的功能';
          break;
      }
      document.getElementById('container').innerHTML = str;
    };


  </script>

• 封装以备复用。

<script>
    // 准备对象，用于封装hash功能
    var router = {
    
      // 路由存储位置：保存了url与内容处理函数的对应关系。
      routes:{
    },
      // 定义路由规则的方法
      route: function(path,callback){
    
        this.routes[path] = callback;
      },
      // 初始化路由的方法
      init: function(){
    
        var that = this;
        window.onhashchange = function (){
    
          // 当hash改变，需要得到新的hash
          var hash = location.hash.replace('#','');
          // 根据hash触发routes中的对应callback
          that.routes[hash] && that.routes[hash]();
        };
      }
    };
    var container = document.getElementById('container');
    // 定义路由规则
    router.route('/',function(){
    
      container.innerHTML= '这是首页功能';
    });
    router.route('/category',function(){
    
      container.innerHTML= '这是分页功能';
    });
    router