1.响应参数变化

子组件下，组件实例会被复用，这样做页面效率更高，但是，组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

watch: {  
    '$route' (to, from) {  
      // 对路由变化作出响应...  
    }  
 }  

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

beforeRouteUpdate (to, from, next) {  
    // react to route changes...  
    // don't forget to call next()  
}  

2.嵌套路由

一般使用嵌套路由的场景都是存在父子组件嵌套，比如：顶层路由为/movie/666,子路由为：/movie/666/comments，router中路由定义：
当 /movie/:id 匹配成功，comments 会被渲染在 Detail 的 <router-view>中

{  
    path: '/movie/:id',  
    name: 'Detail',  
    component: () => import('@/components/Detail/Detail'),  
    meta: {  
      title: '详情'  
    },  
    children: [  
      {  
        path: 'comments',  
        component: comments,  
        meta: {  
          title: '短评'  
        }  
      },  
      {  
        path: 'reviews',  
        component: reviews,  
        meta: {  
          title: '影评'  
        }  
      },  
      {  
        path: 'review/:review_id',  
        component: reviewDetail,  
        meta: {  
          title: '影评详情'  
        }  
      }  
    ]  
  },  

3.编程式的导航

实现跳转可以使用<router-link :to="">,也可以使用router.push(location, onComplete?, onAbort?)使用<router-link>相当于调用了router.push()。
实现链接请求(官方推荐写法，路由的 name 或手写完整的带有参数的 path)：

// 带查询参数，变成 /register?plan=private  
router.push({ path: 'register', query: { plan: 'private' }})  
const userId = '123'  
router.push({ name: 'user', params: { userId }}) // -> /user/123  
router.push({ path: /user/${userId} }) // -> /user/123  
// 这里的 params 不生效  
router.push({ path: '/user', params: { userId }}) // -> /user  

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

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

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

声名	编程
<router-link :to="..." replace>	router.replace(...)

router.go(n)

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

命名路由

在配置路由时，定义name字段，可以更好的方便编程。
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>  

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})  

嵌套命名路由

没有使用过，官方提供了一个示例，演示如下图：

重定向和别名

重定向

重定向也是通过 routes 配置来完成，下面例子是从/a重定向到/b：

const router = new VueRouter({  
  routes: [  
    { path: '/a', redirect: '/b' }  
  ]  
})  

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({  
  routes: [  
    { path: '/a', redirect: { name: 'foo' }}  
  ]  
})  

甚至是一个方法，动态返回重定向目标：

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

别名

别名就是一个类似花名的东西，但都是指向当前的组件。

查看这篇文章，一目了然，点击访问

路由组件传参

开始并不明白，通过搜索引擎找到了一个回答。

当在routes中设置props:ture时，我们在组件中可以通过 props: ['id']获取路由中的参数(id参数)值  

当props:false是无法获取的。  

如果我们不使用props属性，那么我们只能通过传统的方式在组件中获取参数数据  

那么传统的方式为{{ $route.params.id }}  

那么传统的方式就是在组件中用到了路由对象，那么组件就和路由耦合了。  

有下列三种模式：
1.布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性
2.对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({  
  routes: [  
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }  
  ]  
})  

3.函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({  
  routes: [  
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }  
  ]  
})  

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

HTML5 History 模式

history模式，是大多数网站采用的url命名方式。
该模式下，需要对服务器端进行配置。

导航守卫

“导航”表示路由正在发生改变。

此节非常重要，详情点击上面的标题
守卫主要包含全局守卫和局部组件守卫。
全局守卫：
beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置钩子
beforeEnter 路由独享的守卫
组件内的守卫：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

路由元信息

定义路由的时候可以配置 meta 字段：

{  
    path: '/user',  
    name: 'user',  
    component: () => import('@/components/userCenter/userCenter'),  
    meta: {  
        title: '用户中心'  
    },  
    children: [  
      {  
        path: 'login',  
        name: 'login',  
        component: Login,  
        meta: {  
          title: '用户登录'  
        }  
      }]  
}  

例如，根据上面的路由配置，/user/login 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

过渡动效

详情查看官方文档

数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有个 Post 组件，需要基于 $route.params.id 获取文章数据：

<template>  
  <div class="post">  
    <div v-if="loading" class="loading">  
      Loading...  
    </div> 
<div v-if=&quot;error&quot; class=&quot;error&quot;>    
  {{ error }}    
</div>

<div v-if=&quot;post&quot; class=&quot;content&quot;>    
  <h2>{{ post.title }}</h2>    
  <p>{{ post.body }}</p>    
</div>

export default {    
  data () {    
    return {    
      loading: false,    
      post: null,    
      error: null    
    }    
  },    
  created () {    
    // 组件创建完后获取数据，    
    // 此时 data 已经被 observed 了    
    this.fetchData()    
  },    
  watch: {    
    // 如果路由有变化，会再次执行该方法    
    '$route': 'fetchData'    
  },    
  methods: {    
    fetchData () {    
      this.error = this.post = null    
      this.loading = true    
      // replace getPost with your data fetching util / API wrapper    
      getPost(this.$route.params.id, (err, post) => {    
        this.loading = false    
        if (err) {    
          this.error = err.toString()    
        } else {    
          this.post = post    
        }    
      })    
    }    
  }    
}  

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

export default {  
  data () {  
    return {  
      post: null,  
      error: null  
    }  
  },  
  beforeRouteEnter (to, from, next) {  
    getPost(to.params.id, (err, post) => {  
      next(vm => vm.setData(err, post))  
    })  
  },  
  // 路由改变前，组件就已经渲染完了  
  // 逻辑稍稍不同  
  beforeRouteUpdate (to, from, next) {  
    this.post = null  
    getPost(to.params.id, (err, post) => {  
      this.setData(err, post)  
      next()  
    })  
  },  
  methods: {  
    setData (err, post) {  
      if (err) {  
        this.error = err.toString()  
      } else {  
        this.post = post  
      }  
    }  
  }  
}  

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

滚动行为

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({  
  routes: [...],  
  scrollBehavior (to, from, savedPosition) {  
    // return 期望滚动到哪个的位置  
  }  
})  

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。
更多信息，查看文档。

路由懒加载

路由懒加载的作用是将原本聚合的代码，分散加载。只加载此页面的js代码。提高效率。