vue开发的应用一般是单页应用，涉及到页面切换时，通常使用vue-router。
然而一个页面可以包含多个组件，这里还通常涉及单页面组件的切换。当然还有一种情况，就是从一个功能模块的某个页面，跳转到另一个功能模块的某个页面，注意这里的页面其实是vue的组件。
综上，我们总结一下页面跳转所包含的情况：
- 通过改变路由的方式来跳转页面，
- 通过路由不改变，切换组件的方式，跳转页面
- 通过路由改变和组件切换的方式，从A功能某个页面跳转到B功能的某个页面（组件）
下面我们具体分析一下每种跳转的使用方式：
通过路由切换
通过切换路由跳转到某个功能模块的入口页面，这个入口页面一般是app.vue,这个会在组件切换时，详细的分析下。
路由切换的大致使用方式
- 首先安装vue-router插件库
npm install --save vue-router
- 引入vue-router
import VueRouter from 'vue-router
Vue.use(VueRouter)
- 配置一个router.js的文件，里面设置具体的路由
const router = new VueRouter({
routers: [
{
path: '/',
name: 'Shop',
component: Shop
}
]
})
- 然后通过配置router-view 标签来占位置，通过配合router-link来跳转到具体的某个路由
这里只给出了路由使用的配置过程，没有详细的分析路由的前世今生，如果需要学习更深入的路由知识，可以参考官网的教程vue-router
组件切换的方式改变页面
我们一般设计一个功能模块对应一个路由，一个功能模块又包含多个组件。我们需要在不改变路由的情况下，切换多个组件，用于实现某种功能。这个时候就需要专门用于切换组件的组件，一般命名为app.vue。这个过程需要借助Vuex来保存组件名，用于切换。
app.vue一般写法如下
根据模块的需求，在其他模块里通过Vuex的action方法，来修改currentView,当改变了currentView，Vuex的get方法会自动触发，从而更换currentView的值，渲染相应的组件。
路由改变和组件切换混合的方式
通过路由改变和组件切换混合的方式，我们可以实现从A模块的某个组件跳转到B模块的某个组件。在此过程中，我们使用到了路由的一个勾子函数beforeRouterEnter(to, from, next)属于组件内的勾子函数
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
}
}
注意我们在这个方法中还不能获取组件实例this
beforeRouteEnter 不能 访问 this，因为在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在路由被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
我们来分析下，如何借助beforeRouteEnter来跳转到相应页面
有一点需要注意，beforeRouterEnter只能声明在路由定义时component代表的组件内，例如下面的Shop。放到路由的入口组件内，放在其子组件内，不生效。
const router = new VueRouter({
routers: [
{
path: '/',
name: 'Shop',
component: Shop
}
]
})
还有重要的一点需要说明：
假设我们从B模块的b组件跳转到A模块的a组件，可以通过上述代码来解决，在A模块路由入口组件里的钩子方法来跳转到B模块的b组件。但是这里为什么又多加了一层vm.fromPage === '/B/b'的判断呢，因为这里的跳转包含两种情况：
- 第一种情况是从B模块的b组件的一个
链接跳转到A模块的a组件 - 第二种情况比较巧合，是当我们正好访问完/B/b之后，通过菜单的链接跳转到/A/a,这个时候也会触发beforeRouterEnter，这样就直接进去了/A/a模块的a组件内，而我们默认需要进的是/A/index组件内。这个时候我们就可以借助vuex，当我们以第一种情况跳转到/A/a页面的时候，我们通过vuex将fromPage设置为'/B/b'，这个时候vm.fromPage === '/B/b'为true,跳转到a组件，一般处理完a组件会有个返回按钮，通过这个按钮我们再返回/B/b页面，在这个过程中，我们通过vuex重置fromPage为空。做完以上处理之后，当我们再通过菜单链接跳转到/A/index这个路由时，vm.fromPage === '/B/b' 为false，就会跳转到index组件了。
完毕