vue-router项目实战总结篇

今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。

并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。

对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了，

但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由挂载到vue的实例上。

基本的用法就不多赘述，大家可以看vue-router的官网，认真过一遍的话，基本使用肯定没什么问题。

1.为什么我的路由不起作用?

这里有个非常重要的一点就是当我们去构造VueRouter的实例的时候，传入的参数的问题。

import routes from '@/router/router'const router = new VueRouter({ routes // （ES6语法）相当于 routes: routes})new Vue({ router}).$mount('#app')

如果你这里引入的不是routes，你就要按照下面的方式来写。

import vRoutes from '@/router/router'const router = new VueRouter({ routes :vRoutes })new Vue({ router}).$mount('#app') 

2.在路由中基于webpack实现组件的懒加载

对于我们的vue项目，我们基本都是运用webpack打包的，如果没有懒加载，打包后的文件将会异常的大，造成首页白屏，延时严重，不利于用户体验，而运用懒加载则可以将页面进行划分，webpack将不同组件打包成很多个小的js文件。需要的时候再异步加载，优化用户的体验，换而言之，有的页面可能100个用户只有一两个会进去，何必把流量花在它身上。

import App from '@/App.vue'const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')export default [{ path: '/', component: App, children: [  {    path: '/index',    name:'index',    component: index  }]}]

 如果某个组件包含了嵌套路由，我们也可以将两个路由打包到一个js chunk中。

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3.router的模式

对于浏览器，我们的router分为两种模式。

1.hash模式（默认）

按照一个uri的基本结构来说，hash模式就是在一个基本的URI的片段进行的处理。如果抛开SPA的话，比较常见的应用场景就是我们在做pc商城的时候，会有比如说：商品详情，评论，商品参数这样的tab切换，就可以使用a标签配合id使用，加上一点运动的特效，效果甚佳。