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路由简单实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="vue.js"></script>
<script src="vue-router.min.js"></script>
</head>
<body>
<div id="app">
  <p>
    <router-link to="/page1">page1</router-link>    //router-link 组件来导航;
    <router-link to="/page2">page2</router-link>    //`to` 属性指定链接;
    <router-link to="/page3">page3</router-link>    //默认会被渲染成一个 `<a>` 标签;
  </p>
  <router-view></router-view>    //路由出口:路由匹配到的组件将渲染在这里
</div>

<script>
var Page1= { template: '<div>page1</div>' };
var Page2= { template: '<div>page2</div>' };
var Page3= { template: '<div>page3</div>' };
var routes = [
  { path: '/page1', component: Page1},
  { path: '/page2', component: Page2},
  { path: '/page3', component: Page3},
];
var router = new VueRouter({
  routes     //相当于 routes: routes
});
var app = new Vue({
  router
}).$mount('#app')
</script>
</body>
</html>

<router-link> 的属性:

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

Vue基础篇-路由机制

1.模式原理

2.vue-router路由简单实例

猜你喜欢