最全vue-router攻略

简介

vue-router是与组件相辅相成的，学习路由必须要先了解组件；当然，前提是对vue的基础知识已经有了一定的了解。

vue组件

vue组件的核心思想,就是将开发模块化,便于项目的管理与维护;接下来,我们来看几组例子
1 组件的声明
a 全局组件声明

从上图中,我们可以看到,我们已经将对应的代码进行了模块化处理,但这个模块化处理只是最低级的,远远达不到我们的业务需求.
b 局部组件声明

这里声明的组件,将只能在父模版使用,可能有小伙伴对父模版不明白,不过没关系,我们向下看.

看到这里,我不禁会想,这种组件看起来还可以,但总是少点什么,在实际生产中,用起来不怎么方便,有以下缺点:

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

那么我们能不能把其分离出来,在哪里用到,我们引入进来即可,就像用link script标签一样

单文件组件

有牛逼的人,就跟我想到了一起,然后就开发出来了单文件组件.vue
在一个.vue组件中,我们可以把css,js,html写在一起,进行内部耦合,这样方便维护,如果个人不喜欢这样写,也可以把js和css分离,然后进行引入

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

那么,当我们构建了单页面应用的时候,我们要怎么引用它呢?是否可以像link script那样直接引用呢.经过查找资料,发现,其实浏览器是不能直接识别.vue组件的,需要通过各种变换的,所以就需要搭建相应的环境,不过好在vue已经帮助我们完成了环境的搭建,那就是vue-cli;搭建完vue-cli后,我们就可以写spa单页面应用了;

hash和history理解

在html5没出来之前,我们一般用hash改变来实现浏览器的局部跳转而不刷新界面
我们通过手动改变浏览器地址#号后面的内容,然后回车,可以看到,浏览器是能够监听到改变的

window.addEventListener('hashchange',function(){//dosomething })

当html5出来之后,我们可以借助history来实现

名称	说明
window.history.length	历史记录的会话数
scrollRestoration	web应用程序在历史导航上显示的设置默认滚动行为
state	历史堆栈顶部的状态的值
history.back()	前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1)
history.forward()	在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1).
history.go()	通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页
history.replaceState()	按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口

剩下的就是使用vue-cli进行业务代码编写和配置了