来源 | http://www.fly63.com/article/detial/8806

一、安装

1、如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择Yes，后面下载依赖会自动下载vue-router。

  
  
      
    
    Install vue-router?  Yes

2、npm

  
  
      
    
    npm install vue-router

二、将组件 (components) 映射到路由 (routes)并渲染

步骤一

使用vue-cli搭建项目，项目结构中会有一个src文件目录，src文件目录下会有一个router文件夹，此处就是用来编写路由组件的地方。

在src/router/index.js，这个文件就是路由的核心文件。在这个文件里，我们需要做的是，将组件 (components) 映射到路由 (routes)。

  
  
      
    
    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
     
     
     import Vue from 'vue'  // 导入vue
     
     
     import VueRouter from 'vue-router' // 导入vue-router
     
     
     Vue.use(VueRouter)
     
     
     // 1. 定义（路由）组件
     
     
     import Home from '@/components/Home'
     
     
     // 2. 创建 router 实例，然后传 `routes` 配置
     
     
     export default new Router({
     
     
      // 3. 定义路由，每个路由应该映射一个组件，
     
     
      // “component”可以是通过 Vue.extend() 创建的组件构造器，
     
     
      // 或者，只是一个组件配置对象。
     
     
       routes: [
     
     
         {
     
     
           path: '/', 
     
     
           name: 'Home', 
     
     
           component: Home
     
     
         }
     
     
       ]
     
     
     })

步骤二

在src文件目录下找到main.js文件，在此目录创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能。代码如下：

  
  
      
    
    // 1. 引入router
     
     
     import router from './router'
     
     
     // 2. 创建和挂载根实例
     
     
     new Vue({
     
     
       router
     
     
     }).$mount('#app')

步骤三

在src文件目录下找到app.vue文件，在该文件夹下引用router-view组件，用于渲染路由匹配到的组件。ps：一般情况下会在app.vue文件下引用router-view组件，当然也可以在其他地方使用，根据实际情况来定。用法如下：

  
  
      
    
    <template>
     
     
       <div>
     
     
         <router-view />
     
     
       </div>
     
     
     </template>

三、声明式导航

使用 <router-link> 创建 a 标签来定义导航链接。

  
  
      
    
    <div id="app">
     
     
         <!-- 使用 router-link 组件来导航. -->
     
     
         <!-- 通过传入 `to` 属性指定链接. -->
     
     
         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
     
     
         <router-link to="/foo">Go to Foo</router-link>
     
     
         <!-- `replace` 不会向 history 添加新记录，而是替换掉当前的 history 记录-->
     
     
         <router-link to="/bar" replace>Go to Bar</router-link>
     
     
     </div>

四、编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

注意：如果提供了 path，params 会被忽略，需要提供路由的 name 或手写完整的带有参数的 path。

1、用法

  
  
      
    
    // 字符串
     
     
     router.push('home')
     
     
     

     
     
     // 对象
     
     
     router.push({path:'home'})
     
     
     

     
     
     // 命名的路由
     
     
     router.push({name:'user',params:{userId:'123'}})
     
     
     

     
     
     // 带查询参数，变成 /register?plan=private
     
     
     router.push({path:'register',query:{plan:'private'}})

2、获取参数的两种常用方法：params和query

  
  
      
    
    const userId='123'
     
     
     // 传值
     
     
     router.push({name:'user',params:{userId}})
     
     
     // 取值
     
     
     this.$route.params.userId
     
     
     // 传值
     
     
     router.push({path:`/user/${userId}`})
     
     
     // 取值
     
     
     this.$route.query.userId

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

  
  
      
    
    this.$router.push({path:'/home',replace:true})
     
     
     //如果是声明式就是像下面这样写：
     
     
     <router-link :to="..." replace></router-link>
     
     
     // 编程式:
     
     
     router.replace(...)

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

  
  
      
    
    // 在浏览器记录中前进一步，等同于 history.forward()
     
     
     router.go(1)
     
     
     // 后退一步记录，等同于 history.back()
     
     
     router.go(-1)
     
     
     // 前进 3 步记录
     
     
     router.go(3)
     
     
     // 如果 history 记录不够用，那就默默地失败呗
     
     
     router.go(-100)
     
     
     router.go(100)

五、html5 History 模式

vue-router 默认 hash 模式，如果要使用路由的history模式，使用方式如下：

  
  
      
    
    const router = new Vue Router({
     
     
         mode: 'history',
     
     
         routes: [...]
     
     
     })

注：history这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。
如果你的应用加载的是空白页，可以考虑一下是不是使用了history模式。

六、路由懒加载

简单使用

  
  
      
    
    // 1. 定义一个能够被 webpack 自动代码分割的异步组件
     
     
     const Foo = () => import('./Foo.vue')
     
     
     

     
     
     // 2. 路由配置
     
     
     const router = new VueRouter({
     
     
         routes: [
     
     
             { path: '/foo', component: Foo }
     
     
         ]
     
     
     })

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 webpack > 2.4)。

  
  
      
    
    const Foo = () => import(/* webpackChunkName: "group-foo" */  './Foo.vue')
     
     
     const Bar = () => import(/* webpackChunkName: "group-foo" */  './Bar.vue')
     
     
     const Baz = () => import(/* webpackChunkName: "group-foo" */  './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

本文完〜