Vue-router基本学习（1）

多页面应用:网页HTML文件是请求后台发过来的。每次切换页面都会从后台把页面文件传输回来。
单页面应用:网页只有在第一次进入页面的、的时候请求服务器的HTML文件，接下来的页面跳转是基于内部的router。
两种应用的优缺点：

1. 多页面应用只须要加载当前页面所须要的资源，因此首屏时间快。可是每切换一次页面都要去请求一次服务器资源。单页面应用第一次要将全部的资源所有加载，因此首屏时间慢，可是后续的跳转不须要再次向服务器发请求。
2. 多页面应用能够直接实现SEO搜索，可是单页面得有一套单独的SEO方案。
3. 单页面能够实现局部刷新，多页面实现不了。

这里稍微的讲了一些单页面和多页面的一些知识，你们要知道 Vue 是一个单页面应用，其页面的跳转须要经过路由：Vue-router!!! vue-router的安装咱们已经在前面的文章里讲过了，今天这篇文章就讲vue-router的使用。

基本使用

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
import Childs2 from '@/components/Childs2'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
 {
      path:'/parent',
      name:'Parent',
      component:Parent
    },
    {
      path:'/child1',
      name:'Childs1',
      component: Childs1
    },
   {
     path: '/child2',
     name:'Childs2',
    component:Childs2
   }
  ]
})

运行结果以下图：

咱们输入不一样的路由不一样的组件被渲染出。首先咱们将须要在路由里面渲染的组件引入，而后配置路由。path:是咱们须要配置的路径名，component： 是咱们须要在该路径下渲染的组件。

路由嵌套

咱们在开发的过程当中不该该只有一级路由。好比上面的例子，child应该放在`parent的下面，name咱们将怎么样实现路由的嵌套呢？
固然是用路由嵌套啦~

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
import Childs2 from '@/components/Childs2'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
   {
      path:'/parent',
      name:'Parent',
      component:Parent,
      children: [
        {path:'child1', component: Childs1},
        {path:'child2', component: Childs2}
      ]
    }
  ]
})

Parent.vue

<template>
<div>
    Parent
    <router-view> </router-view>
</div>
</template>

运行结果以下图：

Parent.vue 的 <router-view> </router-view>是渲染其组路由组件的地方。咱们能够看到url为/parent的时候，页面上只有paernt的字符串，当咱们路由为两层的时候，parent和child所有展现在页面上。vue-router 会根据不一样的路由加载不一样的组件。

动态路由

若是咱们要将某一种模式下的路由所有映射到同一个组件上，好比咱们要将'/user/tom' 和 '/user/David' 都匹配到一样组件下面，那么动态路由是咱们不二的选择。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
   {
      path:'/parent',
      name:'Parent',
      component:Parent,
      children: [
        {path: 'child1/:name', component:Childs1}
      ]
    }
  ]
})

Parent.vue

<template>
<div>
    Parent
    <router-view></router-view>
</div>
</template>

Childs1.vue

<template>
    <div>
       Childs1-- -{{$route.params.name}}
   </div>
</template>

运行结果以下图：

咱们虽然在/child1后面输入不一样的路径，可是最后所有映射到同一个组件上。this.$route.params对象存放咱们的动态路由的内容。

动态路由引发的组件复用

动态路由就是将不一样的路由映射到同一个组件上，若是两个路由是匹配到同一组件，那么Vue不会将当前组件销毁重建，而是直接替换不同的内容，实现组件的复用。

src/router/index.js
同上

Parent.vue

<template>
<div>
    Parent
    <router-view></router-view>
</div>
</template>

Childs1.vue

<template>
    <div>
       Childs1-- -{{$route.params.name}}
       <button @click="change">点我去aa</button>
   </div>
</template>
<script>
export default {    
    name:'Childs1', 
    data(){
        return{
            title: 1
        }
    },
    methods:{
        change(){
            this.$router.push('/parent/child1/aa' + this.title++);
        }
    },
     mounted(){
        console.log('child1 mounted',new Date().toLocaleString());
    }
}
</script>

运行结果以下图：


咱们使用编程式导航来进行路由切换，title的初始值惟一，在咱们点击按钮进行页面切换的时候，title没有变成初始值，而是复用了前一个页面的组件，在原来的基础上自增。第二章图片也显示，只有第一次进入的时候进入了生命周期钩子，之后的页面切换再也不进入钩子。

编程式导航和声明式导航

编程式导航是调用方法push进行路由跳转，声明式导航是相似于a标签同样的<router-link to='/parent'></router-link>的标签进行跳转。to属性的内容就是咱们要跳转的目标路由。声明式导航最终渲染到页面也是a标签。

声明式导航在被点击的时候会调用编程式导航的方法。
Parent.vue*

<template>
  <div>
    <ul>
      <router-link to='/parent/child1/bb'>
        <li>点我去bb</li>
      </router-link>
      <router-link to='/parent/child1/cc'>
        <li>点我去cc</li>
      </router-link>
      <router-link to='/parent/child1/dd'>
        <li>点我去dd</li>
      </router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

Childs1.vue
同上

运行结果以下图：

li的外面包裹着router-link，当咱们点击的时候，路由就会跳转到咱们to指向的URL，咱们点击按钮的时候，调用了'this.$router.push（url）'方法来进行跳转。这两种方法没有好与坏的区别，只是使用于不一样的场景。

router.push()

push往history栈中加入一条记录，因此当咱们使用浏览器的后退按钮时，还可以回到这一页。

router.replace()

replace是替换栈中当前页的记录，意味着history栈中不会再有当前页的记录。这种方法一般用来受权页，这样就不会有二次受权的状况出现。

router.go()

go是告诉浏览器在history栈中前进或者后退几步，因此咱们通常的页面跳转用push才能在栈中新增一条记录，便于go使用。