vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式来实现，根据mode参数来决定采用哪一种方式，本章主要讲解Hash模式的使用。

一.路由配置

1.定义路由和路由组件

先导入vue和vue-router，接着调用 Vue.use(Router)，并引入路由组件，设置好路由组件对应的路径。(配置参考如下)

//在 src 的 router 目录下 index.js 文件中
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' //路由组件

Vue.use(Router)

export default new Router({  //设置路由路径&导出
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

2.路由导入和路由挂载

接着在 main.js 文件中导入路由模块，并挂载到根实例上

// 在 src 目录下的 main.js 文件中
import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router, //挂载路由 
  render: h => h(App)
})

3.路由输出

最后，通过vue原生提供的 router-view 组件，将路由匹配的组件进行输出

二.路由跳转的两种方式

在vue中，路由跳转不是以传统的a标签来进行实现，主要有以下两种方式。

声明式跳转：使用创建 a 标签来定义导航链接，进行路由跳转


  
    
    
    
    Go to Foo
    Go to Bar

    
    Go to Foo
    Go to Bar

编程式跳转：借助 router 的实例方法，通过编写代码来实现路由跳转


.....

三.路由传参常用的2种方法

vue传参方式有：query+静态路由传参 和 params+动态路由传参 两种。（还有一种 props 方法，此处不做介绍，具体请查看官方文档）

先说下两则的区别：

query通过path切换路由，params通过name切换路由

// query通过path切换路由
前往Detail页面
// params通过name切换路由
前往Detail页面

接收参数的方式不同

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params通过this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}

对动态路由配置还不熟悉的同学，可以点击这里移步动态路由配置参考

四.路由懒加载

路由懒加载能够提高页面的加载速度，不过使用也得看场合。有时候需要懒加载，提升首页加载速度，一般是页面层级较为复杂的时候。

非懒加载的写法

// 非懒加载的写法
import Index from '@/page/index/index';
export default new Router({  
    routes: [    
        { 
            path: '/', 
            name: 'Index',     
            component: Index 
        }
    ]
})

懒加载的写法

//懒加载的写法
export default new Router({
  routes: [    
        { 
            path: '/', 
            name: 'Index', 
            component: resolve => require(['@/page/index/index'], resolve) 
            //或则
            component: () => import('@/pages/home/home')
        }
   ]
})

五.路由重定向和别名

重定向

它有三种写法，直接上代码。（具体想用那种，因人而异）

// 1.静态路径写法
export default new Router({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

// 2.命名路由写法
export default new Router({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

// 3.函数写法
export default new Router({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

在这里主要想说下它的使用场景，通常用于404页面的设置，如下所示。

export default new Router({
  routes: [
    { path: '*', component:Error }
  ]
})

【注意】这里的path：' * ' ，表示输入地址不匹配时，自动显示出Error.vue的文件内容。

别名

直接上代码，这个就不做多介绍了。

export default new Router({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

六：路由嵌套

实际生活中的应用界面，通常由多层嵌套的组件组合而成。因此有的时候我们需要对路由进行嵌套，以便更好的展示内容。（以下是一个简单嵌套的例子）

设置对应路由跳转路径

引入子组件，并设置子组件各自的路由

// router目录下的 index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import More from '@/components/More'
import Much from '@/components/Much'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children:[
        {path: 'more', component: More},
        {path: 'much', component: Much}
      ]
    }
  ]
})

七.命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。

1.在home.vue文件中，设置输出路由，用属性 name 来进行命名不同路由。

引入组件，并在components(注意这里是s结尾)中注册组件

// router目录下的 index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Header from '@/components/Header'
import Main from '@/components/Main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      components: {
        default: Home,
        Header,
        Main
      }
    }
  ]
})

值得注意的一点是，在命名视图中，还可以进行路由的嵌套，对于处理复杂度高的页面可以作为参考，贴上官方文档地址，感兴趣的可以看看。

Vue系列（1）— vue router（上）