单页应用

• 什么是单页应用

  单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。

• 单页应用优缺点

  • 优点
    • 操作体验流畅
    • 完全的前端组件化
  • 缺点
    • 首次加载大量资源(可以只加载所需部分)
    • 对搜索引擎不友好
    • 开发难度相对较高

• 单页应用的原理

  • Hash路由

    • 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由，

      并且当 url 的 hash 发生变化的时候，可以触发相应 hashchange 回调函数。

    • 模拟实现

    var app = document.getElementById('app');
    window.onhashchange = function () {
        var hash = location.hash.replace('#', '');
        switch (hash.toLowerCase()) {
            case '/': 
                app.innerHTML = '首页内容';
                break;
            case '/users':
                app.innerHTML = '用户管理内容';
                break;
                ……
        }
    };
    

  • History路由

    • History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制。

vue-router

快速体验

1. 导入vue和vue-router

2. 设置HTML中的内容

   <!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
   <router-link to="/users">用户管理</router-link>
   
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
   

3. 创建组件

   // 创建组件
   // 组件可以放到单独的js文件中
   var Home = {
       template: '<div>这是Home内容</div>'
   };
   var Users = {
       template: '<div>这是用户管理内容</div>'
   };
   

4. 配置路由规则

   // 配置路由规则
   var router = new VueRouter({
       routes: [
           { name: 'home', path: '/', component: Home },
           { name: 'users', path: '/users', component: Users }
       ]
   });
   

5. 设置vue的路由选项

   var vm = new Vue({
       el: '#app',
       router
   });
   

动态路由匹配

假设有一个用户列表，想要删除某一个用户，需要获取用户的id传入组件内，如何实现呢？

此时可以通过路由传参来实现，具体步骤如下：

1. 路由规则中增加参数，在path最后增加 :id

   { name: 'users', path: '/users/:id', component: Users },
   

2. 通过 <router-link> 传参，在路径上传入具体的值

   <router-link to="/users/120">用户管理</router-link>
   

3. 在组件内部可以使用，this.$route 获取当前路由对象

   var Users = {
       template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
       mounted() {
           console.log(this.$route.params.id);
       }
   };