Vue基础篇-路由机制

1.模式原理

不向服务器发请求而是找到匹配组件或对象，并将其渲染。即为“前端路由”准则。vue实现路由需引入vue-router，其使用的有两种模式，即：hash模式&history模式，下边来简单介绍一下。

（1）hash模式

         概念：hash是指url尾巴后的 # 及后面的字符，a标签的锚点定位页面就是这种模式。

         原理：onhashchange事件。

         注意：1.hash的地址会保留在浏览记录里；2.地址栏直接修改 # 后的字段即可实现路由了。

         监听：

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    var hash = location.hash.slice(1);
    document.getElementById("div001").style.color = hash;
}

（2）history模式

         概念：HTML5中有关history的API完善了前端路由。

         原理：history的API----pushState,replaceState。

   注意：1.前进，后退功能更完善；2.F5刷新就是终结者，分分钟出现404；

         实现：

pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url；通过pushstate把页面的状态保存在state 对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}
history.back();
history.forward();

2.vue-router路由简单实例

  

    page1    //router-link 组件来导航;
    page2    //`to` 属性指定链接;
    page3    //默认会被渲染成一个 `` 标签;
  

      //路由出口:路由匹配到的组件将渲染在这里

的属性:

to	链接目标	router.push()方法	to="/page3">page3
replace	导航不留下记录	router.replace()方法	to="/page3" replace>page3
append	路径添加基路径	/a跳到b：/b(未使用);/a/b(使用)	to="/page3" append>page3
tag	渲染成什么标签	-	to="/page3" tag="li">page3
active-class	激活链接使用的样式类	-	to="/page3" active-class="自定义的样式类">page3
exact-active-class	精确匹配后激活链接使用的样式类	-	-
event	触发导航的事件	-	to="/page3" event="mouseover">page3