Vue路由学习笔记

Vue学习笔记

前端路由

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

单页应用优缺点

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

单页应用的实现原理

前后端分离(后端专注于数据、前端专注于交互和可视化)+前端路由

Hash路由

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

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

• 模拟实现:

<a href="#/">首页</a>
<a href="#/users">用户管理</a>
<a href="#/rights">权限管理</a>
<a href="#/goods">商品管理</a>
<div id="box">
    </div>
<script>
    var box = document.getElementById('box');
window.onhashchange = function() {
    // #/users
    var hash = location.hash;
    hash = hash.replace('#', '');
    switch (hash) {
        case '/':
            box.innerHTML = '这是首页';
            break;
        case '/users':
            box.innerHTML = '这是用户管理';
            break;
        case '/rights':
            box.innerHTML = '这是权限管理';
            break;
    }
};
</script>

History路由

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

vue-router

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

实现根据不同的请求地址 而显示不同的组件

1. 导入vue和vue-router

2. 安装
   直接下载 / CDN
   添加链接描述
   推荐使用淘宝镜像：
   npm install vue-router

3. 设置HTML中的内容

<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<!--在<script></script>中设置vue的路由选项-->
var vm = new Vue({
    el: '#app',
    router
});

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 }
    ]
});