vue-Router路由

单页应用

是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！

 vue-router原理

vue-router通过hash与history两种方式实现前端路由的，'更新视图但不重新请求页面'是前端路由原理的核心之一。

在vue-router中提供mode参数来决定采用哪种方式，默认是hash

（1）mode:'hash':  http://localhost:8080/#/recommend      多了“#”

（2）mode:'history'：http://localhost:8080/recommend

hash与history的区别：

hash模式url里面永远带着#号，在开发过程中默认使用这个模式。如果用户考虑到url的规范就需要使用history模式了。

hash的特点在于，hash虽然出现在url中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

hash模式（用户体验好）

原理：利用hashchange事件监听URL中（锚点）hash路由的变化。

window.addEventListener('hashchange',function(e){

　　console.log(e);

})

 

而history不怕前进和后退，就怕刷新，当刷新时，如果服务器没有相应的资源时，会报404错误。

history利用了html5新增的pushState()和replaceState()方法，应用于浏览器的历史记录栈。在当前以有的back、forward、go的基础上，他们提供了对历史纪录进行修改的功能.

 

两种模式比较：

一般的需求场景中，hash模式与histiry模式是差不多的，但是调用history.pushState()相比于直接修改hash主要有以下优势：

（1）pushState设置的新url可以是与当前url同源的任意url，而hash只可修改#后面的部分，故只可设置与当前同文档的url。

（2）pushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中。

（3）pushState通过stateObject可以添加任意类型的数据，而hash只可添加短字符串。

 

路由：

<div id="app">
　　<h1>router</h1>
　　<!--通过to属性指定链接-->
　　<router-link to='/foo'>Go to Foo</router-link>
　　<router-link to='/bar'>Go to Bar</router-link>

　　<!--路由匹配的组件在此处渲染-->
　　<router-view></router-view>
</div>

<script>
　　//定义组件
　　const Foo={template:'<div>foo</div>'}
　　const Bar={template:'<div>bar</div>'}

　　const routes=[
　　　　{path:'/foo',component:Foo},
　　　　{path:'/bar',component:Bar}
　　]　

　　//创建 router 实例，然后传 `routes` 配置
　　const router=new VueRouter({
　　　　routes
　　})


new Vue({
el:"#app",
router
})
</script>

 

 

嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。

　　在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了childrens 属性，它也是一组路由,相当于我们所写的routes。

　　首先，在home页面上定义三个router-link 标签用于导航，然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要一一对应。home.vue 组件修改如下：

router.js 配置路由，修改如下：

const routes = [

    {
        path:"/home",
　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
　　　　 // 子路由

　　　　children: [
    　　{
        　　path: "phone",
        　　component: phone
    　　},
    　　{
        　　path: "tablet",
        　　component: tablet
    　　},
    　　// 当进入到home时，下面的组件显示
    　　{
       　　 path: "",
        　　component: phone
    　　}
　　]

}
]