我会从两个方面来写路由

自定义路由（以拉勾网为例）

路由指的是在不刷新页面的情况下更新页面通过：#hash，例如：10.0.164.8:8080/index.html/#main
然后通过H5的history对象的history.pushState()+popState事件实现路由切换

实现步骤：
(1)在script文件下创建路由表 routes.js

export default {'/' : 'Position' 首页'/search': 'Search','/mine' : 'Mine'
}

（2）在app.js中匹配路径

import routes form  './routes'
//动态获取组件
new Vue({el : '#root',data:{//定义当前路径信息currentRoute: window.location.pathname   },computed : {    //生成子路由组件ViewComponent() {//根据路由找到匹配的组件名const MatchingView = routes[this.currentRoute];返回组件对象return MatchingView ？ require(`./page/${MatchingView}.vue`) ：require('./page/404.vue')}},//渲染组件render(h) {return h(this.ViewComponent)}
})

(3)在index.vue中的section放通过插槽存放porixtion mine search 组件

<section><slot></slot> //插槽用来存放各个组件
</section>

(4)position.vue

import Index from './Index.vue'
export default {//导入Index组件data() {return{}},componets ： {Index //定义Index组件}
}将template的内容外层用 <Index></Index>包(Index建个插槽)

(5)同理search也一样

search.vue
import Index from './Index.vue'
export default {//导入Index组件data() {return{}},componets ： {Index //定义Index组件}
}将template的内容外层用 <Index></Index>包

(6)点击链接切换组件

通过history提供的事件
window.addEventListener('popstate',function(){vm.currentRoute = window.location.pathname
},false)

(7)定义点击切换组件时的a标签组件

VLink.vue 写逻辑<template><a :href='href' class="{active：isActive}"><slot></slot>@click.prevent='go'</a></template>import routes from '../routes'export default {props : {               //对象类型href: {type ： String,required ： true}},computed: {isActive () {<!--判断调用组件传递进来的href是否是当前路径的href-->return this.href == this.$root.currentRoute}},methods:{go(){this.$rout.currentRoute = this.hrefwindow.history.pushState(null,routes[this.href],this.href)}}}

(8)通用组件，Vlink.vue 在index.vue中引入

import VLink form '../../vlink.vue'
在index.vue里找到底部 ul li 用 v-link 标签包住
<ul><v-link href='/'><li></li></v-link><v-link href='/search'><li></li></v-link><v-link href='/mine'><li></li></v-link>
</ul>
通过a链接<template><a><slot></slot></a></template>Vue.component('VLink',{template})

vue-router

还是框架简单 来来来

路由有三种导航钩子：

• 1 、全局导航钩子

  beforeEach
  beforeResolve
  afterEach

     每个钩子方法接收三个参数：to: Route : 即将要进入的目标 [路由对象]from: Route : 当前导航正要离开的路由next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed （确认的）。next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from路由对应的地址。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。确保要调用 next方法，否则钩子就不会被 resolved。

  例子：

     const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// do something next();});router.afterEach((to, from, next) => {console.log(to.path);});原文链接：http://blog.csdn.net/sinat_17775997/article/details/68941078

• 2 、某个路由独享的导航钩子

  beforeEnter

• 3 、路由组件里的导航钩子

  beforeRouteEnter
  beforeRouteUpdate (2.2 新增)
  beforeRouteLeave
  例子：

  let fromPath = '';
  export default{beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当钩子执行前，组件实例还没被创建fromPath = from.path;next();},
  }
  

（1）安装插件 npm i vue-router -D

app.js引入：
import Vue from 'vue'
import VueRouter from 'vue-router'
import '../../app.scss'
import routes from './routes'Vue.use(VueRouter)const routes = new VueRouter({routes
})
new Vue({el:'#root',router
})配置：
webpack.config.js,跟plugins同级
externals : {'vue' : 'window.Vue''vue-router':'window.VueRouter'
}
会将第三方组件抽离出去
把node_modules/vue/dist/vue.min.js
/vue/dist/vue-router/vue-router.min.js
放到根目录并在index.html中引入这样减小了app.js的大小

(2)定义

1、 scripts下创建routes.jsimport Index frmm './pages/Index.vue'
import Position from './pages/Position.vue'
import Search from './pages/Search.vue'
import Mine from './pages/Mine.vue'路由表：
export default [{path: '/',componebt: 'Index',childern: [{path:'/position',component : Position,},{path:'/search',component : Search},{path:'/mine',component : Mine},]}
]2.首页 更改入口index.html<router-view></route-view>index.vue<router-view></route-view>index.vue
import {routerLink} from 'vue-router'
//声明式跳转
<router-link :to='{name:'Detail',params:{xid:123}}'>去详情页
</router-link>
获取：this.$route.params.xid
编程时跳转
this.$router.history.push({name:'Detail',params:{xid:123}})