vue-router笔记

路由

路由，路由是通过互联的网络把信息从原地址传输到目的地址的活动

设备只要连接到路由器，路由器会给设备一个ip，这个ip地址叫做内网ip，只在当前环境下有效，统一路由器下不能有相同的ip地址

一条信息发送后，先找到路由器，再经由路由器分发给最终收到信息的设备，路由器分发的过程依靠映射表（内网ip和电脑标识），把内网ip和mac地址（设备唯一标识）连起来

路由提供了两种机制：路由和传送
路由是决定数据包从来源到目的地的路径
转送将输入端的数据转移到合适的输出端

web发展阶段，前端渲染&后端渲染

后端渲染&后端路由：

第一阶段，
早期网站开发整个html页面是由服务器来渲染的，服务器直接生产渲染好对应的html页面，返回给客户端进行展示
当页面中需要请求不同的路径内容时，交给服务器进行处理，服务器渲染好整个页面，并且将页面返回给客户端
后端路由的优点：
这种情况下渲染好的页面不需要单独加载任何的js和css，可以直接交给浏览器展示，这样也有助于SEO（搜索引擎）优化
后端路由的缺点：
整个页面的模块是后端编写和维护的，开发需要PHP和java等语言进行编写，各种代码容易混杂，编写维护成本很大

详细版：
1，网页初期用的都是后端渲染，最早的网页都是jsp/php（java）开发的，早期没有js
当浏览器请求网页的时候，浏览器把url发送到服务器中，服务器拿到网页地址，先对地址进行解析，在服务器的后台通过jsp(html+css+java，java从服务器中读取数据并且动态渲染到页面中)把网页写好
然后再把绘制好的网页回传给浏览器，最终代码只有html和css，这种早期的渲染模式就是后端（服务端）渲染，因为页面是在后端通过jsp/php技术实现的

2，当请求多个页面的时候就会触发多次上面的操作，后端通过jsp技术绘制多个页面，多个页面的时候，请求的url和绘制的页面就形成了一种映射关系，
发送的第一个url请求，url1对应页面1，第二个请求url2对应页面2，依次对应。这种映射关系存储在服务器中，后端处理URL和页面关系之间的映射关系，
这种路由就叫做后端路由

前端渲染：

第二阶段，
前后端分离阶段：
随着Ajax的出现，有了前后端分离的开发模式
后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过js将数据渲染到页面上
这样做最大的优点就是前后端责任清晰，后端专注于数据，前端专注于交互和可视化
当移动端出现后，后端不需要进行任何处理，直接使用之前的API即可，不管是什么平台（网页或者是app）访问数据都是访问的同一个服务器请求数据，后端并不关心是谁请求的

详细版：
用户在使用浏览器，发出url请求的时候，浏览器首先向静态资源服务器发送请求，取得一些资源（js，html，css），其中html和css可以直接在浏览器上进行渲染
js代码则由浏览器进行执行，js代码中存在一些api请求的时候，浏览器再去存放提供API接口服务的服务器请求API资源，再用js代码渲染到浏览器上
也就是最终的渲染操作是发生在浏览器上的，浏览器自己请求过来需要的东西自己渲染，这个东西就叫前端渲染（浏览器中显示的网页中的大部分内容，都是由前端写的js代码
在浏览器中执行，最终渲染出来的网页

第三阶段

SPA，simple page application单页面富应用
SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
我理解的就是，在开发时候，将所有的js文件都打包成一个js文件，这个大的js文件是由多个组件组成的，一个组件可能就是一个页面，或者一个功能，当触发某些映射规则（如点击按钮）时，浏览器就去服务器里面找到大js文件，再从js文件中找到相应的组件

前端路由：管理映射关系，前端路由就是用于映射浏览器上url和大的js中个组件的对应关系的，url和页面（组件）的映射关系，一个url对应一个页面（组件）
前端路由的核心：改变URL，但是页面不进行整体的刷新，有两种方案可以解决这个问题：
1，改变url的哈希，页面不会进行刷新，url的hash也就是秒点，本质是改变window.location的href属性，可以直接通过赋值location.hash改变href，页面不发生刷新
2，html5的history模式，pushState，h5中有一个history对象，对象中有pushState方法，例子：history.pushState({},’’,‘home’)，push把url压如栈结构

栈结构：先入后出，单口的，同口进同口出

Vue-router

前端三大框架都有自己的路由实现
vue-router基于路由和组件
路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径的改变就是组件的切换，并把对应的组件渲染到页面上

使用vue-router

1，在模块化工程中使用，因为是插件，所以可以使用Vue.use()安装路由功能
2，创建路由实例，并传入路由映射配置，一个组件和一个组件路径写一个映射关系对象。我这里是单独写了个routes数组，把映射关系全都写进去了，再在实例中把外面声明好的routes拿过来，可以提高代码的简洁性
3，在Vue实例中挂载创建的路由实例，在router下的index.js中使用export导出创建的路由实例，同时在App.vue中导入路由实例

在页面中显示路由

显示默认页面以及history模式

在routes中创建route对象的时候，可以添加一个新的对象用于页面的redirect（重定向），该功能主要用于显示默认页面的，我们希望打开网页后直接显示首页内容，就可以给首页组件做重定向，方法很简单，只需要在route里面新建一个对象，path为空，并使用redirect属性，属性值给到希望默认显示的页面路径即可，这样再打开页面的时候就会默认显示首页的内容了

history模式

如果不进行手动的模式指定的话，系统会默认以修改哈希值的方法完成路由，做到跳转页面不刷新，但是这种方式显示的地址栏会带有#键，为了显示更美观，我们可以指定使用h5的history模式，这样就可以省去默认的#。

router-link&router-view

router-link

使用路由，需要router-link和router-view，router-link to=’'指向跳转的连接名，router-view用于占位，写了router-view才能最终渲染出来，router-link是vue-router内置组件，默认情况下会被渲染成一个a标签。
router-link的补充：之前只用了to属性，指定跳转的路径
1 router-link还有其他属性，默认的router-link最终渲染成a标签，但是可以通过tag属性改变最终渲染的dom元素类型,不管是渲染成什么标签都自带点击事件
2 router-link的replace，默认用户是可以点击返回上一级的，可以通过手动给router-link增加replace属性，就可以禁用用户返回上一级的跳转,原理是利用了history的replacestate/能返回的是pushstate
3 router-link对应的路由匹配成功的时候（活跃状态，如被点击的时候），会自动给当前元素设置一个class，名为router-link-active（该名称为默认），可以手动指定active-class属性值来修改默认名称，通过控制该标签可以进行点击变亮之类的操作

router-link-class可以在router的index.js的实例化过程中修改，在实例中有一个linkActiveClass属性，修改该属性的属性值，可以一次性将所有默认的router-link-class修改为用户指定的名字

用代码手动实现router-link

通过代码的方式修改路径，绑定点击事件配合vue-router达到router-link的方法
所有router组件中都有一个$router属性，this.router可以拿到该组件，直接用this.router.push(’/home’)可以手动实现修改路径
push相当于pushstate（可以返回上个页面），也可以使用replacestate（不能返回上个页面），和router-link类似。

router-view

router-view会根据当前路径，动态渲染出不同的组件，在路由切换的时候，切换的是router-view挂载的组件，其他的内容不会发生改变

$router 和 $route

$router为VueRouter的实例，相当于全局的路由对象，里面有多个属性和对象，上万种，我们就用router.push手动实现了路径修改。
$route则是选中当前激活状态的路由对象，可以从中获取name，param，query等，借助 $route，我们可以实现动态路由的绑定

动态路由

某些情况下，一个页面的path路径可能是不确定的，比如进入用户界面的时候是/user/aaa或者/user/bbb。这种时候前面的/user是确定的，但是后面不同的用户id肯定不一样，这种情况我们称为动态路由。
既然是动态路由，那我们希望获取到的url地址中信息应该是动态改变的，而不能直接写死。

router-link直接写死的样子，就直接to到/home目录

想动态写to的地址可以使用v-bind进行信息绑定，把数据写在data中

这样最终当在页面上点击某个组件的时候url的跳转就会是固定的user+（动态切换展示）的某个用户页面

还没完，我们希望根据不同的用户展示不同的内容时，可以在user用户组件下进行配置，这个就是利用上文提到的 $route,再次进行说明， $route是当前哪个路由处于活跃状态，拿到的就是哪个路由，翻译成人话就是说，我们当前点击到了哪个组件，哪个组件就是活跃状态。 $route.params.userId拿到的就是我们在App.vue下给定的数据。
可以通过两种方式将数据渲染到页面上，
1：
写一个computed计算属性，在这里面进行运算后，把运算后的成果用mustache语法放到dom元素中

2：
直接mustache语法写进去