vue学习（15）— 前端路由和vue-router路由

路由概念：

 

后端路由阶段

使用Java server page开发网页，服务器直接生产渲染好对应的网页返回给浏览器，

属于后端渲染

 

前端路由阶段

html、css、js静态文件放到静态服务器，浏览器请求后返回由浏览器进行解析渲染，后端服务器提供动态的数据

属于前端渲染

单页面富应用阶段，SPA

只有一个html文件，index.html，css，js也可能只有一个，浏览器一次请求会将所有的资源加载到浏览器中，各个页面以组件的形式存在，不同的url对应不同的组件，一个url对应一个组件，前端路由用于处理维护这样的对应关系，每次url的改变发出新的请求只是从所有的资源中抽取出来对应的组件，不再刷新页面去请求后台服务器，

 

实现URL改变，页面不请求后台

方式一

方式二

ＨＴＭＬ的ｈｉｓｔｏｒｙ的５种方式

1、history.pushState()

2、history.replaceState()

3、history.back()

4、history.go()

5、history.forward()

 pushState()方式，push是个压栈操作，可以多次压栈，栈是先进后出，每一次压栈之后都可以使用history.back()方法返回上一个url，或者通过浏览器的前进后退进行操作

replaceState()是属于替换操作，每次操作都会替换掉之前的URL，不能通过history.back()或者浏览器的前进后退按钮进行前进或者后退操作

 

 

 

 

roter-view标签类似于slot插槽标签，作为一种占位使用，组件直接替换，此标签外的其他内容不会发生改变

 

 

URL的hash模式，路径中会有#符号，使用history则没有

 

vue-router默认给每个组件都有一个$router对象，底层使用的是history.pushStatue()

还可以使用$replace，底层使用的是history.replaceStatue()