共计 3595 个字符，预计需要花费 9 分钟才能阅读完成。
多页面应用: 网页 HTML 文件是请求后台发过来的。每次切换页面都会从后台把页面文件传输回来。单页面应用: 网页只有在第一次进入页面的、的时候请求服务器的 HTML 文件，接下来的页面跳转是基于内部的 router。两种应用的优缺点：
多页面应用只需要加载当前页面所需要的资源，所以首屏时间快。但是每切换一次页面都要去请求一次服务器资源。单页面应用第一次要将所有的资源全部加载，所以首屏时间慢，但是后续的跳转不需要再次向服务器发请求。
多页面应用可以直接实现 SEO 搜索，但是单页面得有一套单独的 SEO 方案。
单页面可以实现局部刷新，多页面实现不了。
这里稍微的讲了一些单页面和多页面的一些知识，大家要知道 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 使用。
