# Vue Router路由

# 从零开始简单的路由

简单原理：根据url路径改变渲染的模板

window.location.pathname 为当前url的路径
利用render函数、计算属性动态改变渲染的模板
注意：前提条件是需要开启http服务，且所有请求都需要指向一个页面。

<!-- 0_从零开始简单的路由.html -->
<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const NotFound = { template: '<p>Page not found</p>'}
    const Home = { template: '<p>Home page</p>'}
    const About = { template: '<p>About page</p>'}

    const routes = {
      '/': Home,
      '/about': About
    }

    let app = new Vue({
      el: '#app',
      data: {
        currentRoute: window.location.pathname
      },
      computed: {
        ViewComponent() {
          return routes[this.currentRoute] || NotFound
        }
      },
      render(h) {
        return h(this.ViewComponent)
      }
      // 等价于
      // render: function(h) {
      //   return h(this.ViewComponent)
      // }
    })
  </script>
</body>

# 利用node来开启HTTP服务

1.在 0_从零开始简单的路由.html 目录下，打开控制台
2.npm init 初始化node，安装express
3.创建index.js文件，并写入下面的代码，开启http服务，并将所有请求重定向到一个页面
4.node index.js后，浏览器访问 127.0.0.1:3000 测试，效果类似于vue-router的history模式
- 访问 http://127.0.0.1:3000 页面显示 Home page
- 访问 http://127.0.0.1:3000/about 页面显示 About page
- 访问未知页面 http://127.0.0.1:3000/test 页面显示 Page not found

// index.js
const express = require('express');
const fs=require("fs");
const app = express();

app.use('*', function(req, res) {
  console.log('接收到请求')
  console.log(req.baseUrl)

  res.sendfile('0_从零开始简单的路由.html')
})

app.listen(3000, function() {  
    console.log("server start at 127.0.0.1:3000");
});

# vue-router(官方路由)

对于大多数单页面应用(SPA)，都推荐使用官方支持的 vue-router 库。

vue-router 开源地址 (opens new window)
vue-router 官方文档 (opens new window)

# 安装

# 直接下载/CDN

https://unpkg.com/vue-router/dist/vue-router.js

使用示例

<!-- 先加载vue，再加载vue-router -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

# npm安装

npm install vue-router

使用示例

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

# 介绍

对于TypeScript用户来说，vue-router@3.0+ 依赖 vue@2.5+，反之亦然。

Vue Router是Vue.js官方的路由管理。和Vue.js核心深度集成。自定义了两个组件RouterView及RouterLink，均使用render函数渲染，包含功能：

嵌套的路由/视图表
模块化、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

vue-router 3.1.3版本源码只有 2900 行左右，有时间可以仔细看看

# 基础

# 起步(第一个vue-router页面)

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- router-link标签会默认渲染为一个a标签，to属性用来指定链接-->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>

    <!-- 路由出口，路由匹配到组件将在这里渲染-->
    <router-view></router-view>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>

    // 1. 定义 (路由) 组件。
    const Foo = { template: '<p>foo page</p>'}
    const Bar = { template: '<p>bar page</p>'}

    // 2. 定义路由
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes // 相当于 routes: routes
    })

    let app = new Vue({
      el: '#app',
      router,
    })
    // 也可以这样写
    // const app = new Vue({
    //   router
    // }).$mount('#app')
  </script>
</body>

可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。
注意，当 router-link 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

# 动态路由匹配

动态路径参数(dynamic segment) 可以将某种模式匹配到的所有路由都映射到同一个组件。

路径参数使用 : 标记, 当匹配到路由时，参数值会被设置到 this.$route.params，可以在每个组件中使用

// 下面的例子中 /user/foo 和 /user/bar 都将映射到相同的路由
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

$route.params相关

模式	匹配路径	$route.params
/user/:un	/user/guoqzuo	{ un: 'guoqzuo'}
/user/:un/post/:post_id	/user/guoqzuo/post/666	{ un: 'guoqzuo', post_id: '123' }

$route.query 等其他参数，以下图为例
- name 路由名称
- fullPath: "/user/kevin?a=b&k=a"
- hash: ""
- name: undefined
- params: { id: "kevin" }
- path: "/user/kevin"
- query: { a: "b", k: "a" }

1_路由route值.png

# 响应路由参数的变化

使用路由参数时（例如从/user/foo导航到/user/bar），原来的组件实例会被复用。这也意味着组件生命周期的钩子函数不会再被调用。 当组件复用时，想对路由参数的变化做出响应，有两种方法：

可以使用watch来监听 $route 对象:
使用 v2.2 中引入的 beforeRouteUpdate 导航守卫


// 组件复用时，对路由参数变化做出响应的方法
const User = {
  template: '...',

  // 方法1:
  watch: {
    '$route' (to, from) {
      // 对路由变化做出响应
      // to, from 都是一个 $route 对象
    }
  },

  // 方法2: 
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
    // 如果这里不调用next()，RouterView不会加载新的页面
  }
}

# 捕获所有路由或404

匹配任意路径，使用通配符 (*)，使用通配符路由时，需要确保路由的顺序正确(一般放到最后，用于404)
通过 this.$route.params.pathMatch 可以获取匹配到的信息

{
  path: '*' // 匹配所有路径
}
{
  path: '/user-*' // 匹配以 'user-' 开头的任意路径
}

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

# 高级匹配模式与匹配优先级

vue-router 使用 path-to-regexp (opens new window) 作为路径匹配引擎，所以支持很多高级的匹配模式，如：可选的动态路径参数、匹配0个或多个、一个或多个，甚至自定义正则匹配。
谁先定义的，谁的优先级就最高。

# 嵌套路由

嵌套路由指的是 router-view 里面再嵌套 router-view 的情况。

<div id="app">
  <router-view></router-view>  
</div>

<script>
  const User = {
    template: `
      <div class="user">
        <h2> User {{ $route.params.id }} </h2>
        <router-view></router-view>
      </div>
    `
  }
  const UserHome = { template: '<p>UserHome</p>' }
  const UserProfile = { template: '<p>UserProfile</p>' }
  const UserPosts = { template: '<p>UserPosts</p>' }
  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        component: User,
        children: [
          {
            // 当 /user/:id 匹配成功，
            // UserHome 会被渲染在 User 的 <router-view> 中
            path: '',
            component: UserHome
          },
          {
            // 当 /user/:id/profile 匹配成功，
            // UserProfile 会被渲染在 User 的 <router-view> 中
            path: 'profile',
            component: UserProfile
          },
          {
            // 当 /user/:id/posts 匹配成功
            // UserPosts 会被渲染在 User 的 <router-view> 中
            path: 'posts',
            component: UserPosts
          }
        ]
      }
    ]
  })
</script>

以 / 开头的嵌套路径会被当做根路径，可以充分的使用嵌套组件而无须设置嵌套的路径。

// 访问 /testuser 可以直接使用嵌套组件
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: '/testuser',
          component: TestUser
        }
      ]
    }
  ]
})

如果嵌套的路由没有匹配到，会影响上级路由的显示，上面的例子中，User里的router-view如果没匹配到，整个User都不会显示。

# 编程式的导航

# router.push

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

声明式	编程式
<router-link :to="...">	router.push(...)

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

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

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

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

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

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

onst 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

# router.replace

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

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

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

# router.go

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

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

# 操作history

router的api效仿了 window.history API

router API	window.history API
router.push	window.history.pushState
router.replace	window.history.replaceState
router.go	window.history.go

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

# 命名路由

有时候，通过一个名称来标识一个路由会更方便

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

跳转到命名路由的两种方式

router-link，to属性传一个对象

<!-- 把路由导航到 /user/123 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push

// 把路由导航到 /user/123
router.push({ name: 'user', params: { userId: 123 }})

# 命名视图

如果需要同级展示多个视图，可以使用命名视图, 如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

同一个路由渲染多个视图就需要多个组件，需要使用components参数

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

# 嵌套命名视图

1_2_嵌套命名视图.png

Nav 只是一个常规组件。
UserSettings 是一个视图组件。
UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

<script>
{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}
</script>

# 重定向和别名

# 重定向

可以将某个url重定向到另一个url，比如，将 /a 重定向到 /b，在routes数组元素里使用redirect属性即可，redirect属性有三种参数类型：

字符串，直接定向到另一个链接
对象，重定向到一个命名的路由
函数，动态返回重定向目标

const router = new VueRouter({
  routes: [

    // 1.
    { path: '/a', redirect: '/b' },

    // 2.
    { path: '/c', redirect: { name: 'foo' }},

    // 3.
    { path: '/d', redirect: to => {
      // 方法接收 目标路由(to) 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

注意：导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。上面的例子中，为 /a, /c, /d 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

# 别名

路由访问/b 时，url保持为/b，实际显示的是/a的页面

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

# 路由组件传参

如果组件内部使用了 $route 的相关属性值，组件和路由会形成高耦合，组件只能在特定的url上使用，限制了其灵活性。可以通过路由传参的方式，将组件和路由解耦

// 这里组件里使用了路由的参数，路由和组件高耦合
const User = {
  template: '<p> User {{ $route.params.id }} </p>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

// 使用props传参来解耦, 这样可以在任何地方使用该组件
const User = {
  props: ['id'],
  template: '<p> User {{ id }} </p>'
}
const router = new VueRouter({

  // 如果 props 被设置为 true，route.params 将会被设置为组件属性
  routes: [
    { path: '/user/:id', component: User , props: true },

    // 如果包含命名视图，必须为每个视图加上props属性
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

# props的值有三种

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

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

函数模式, 可以创建一个函数返回props

// URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

# HTML5 History 模式

vue-router 默认为 hash 模式, 使用hash来模拟完整的url，当URL改变时，页面不会重新加载, 如果不想使用这种模式，可以使用history模式(这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。)

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

路径	本地File访问-hash	http服务 - hash	http服务 - history
/	4_嵌套路由.html#/	http://127.0.0.1:3000/#/	http://127.0.0.1:3000/
/bar	4_嵌套路由.html#/bar	http://127.0.0.1:3000/#/bar	http://127.0.0.1:3000/bar
/testuser	4_嵌套路由.html#/testuser	http://127.0.0.1:3000/#/testuser	http://127.0.0.1:3000/testuser

// http服务 配置 node ,所有路由均指向4_嵌套路由.html
const express = require('express');
const fs=require("fs");
const app = express();

app.use('*', function(req, res) {
  console.log('接收到请求')
  console.log(req.baseUrl)

  res.sendfile('4_嵌套路由.html')
})

app.listen(3000, function() {  
    console.log("server start at 127.0.0.1:3000");
});

更多后台配置，参考：后端配置例子 (opens new window)

# 进阶

# 导航守卫

导航表示路由正在发生改变，守卫的意思类似于钩子函数，从一个链接跳转到另一个链接过程中会触发不同的钩子函数，在函数内部可以对跳转进行拦截处理。

路由钩子函数和路由守卫的区别，钩子函数没有next参数，不可以对路由进行拦截。路由守卫函数有next参数，可以对路由进行拦截

# 全局前置守卫 router.beforeEach()

const router = new VueRouter({...})

router.beforeEach((to, from, next)=> {
  // 
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。如果不调用第三个参数resolve这个钩子，那么导航不会完成跳转。每个守卫方法接收3个参数:

to 类型为Route, 将要进入的目标路由对象
from 类型为Route, 导航正要离开的路由
next 类型为Function，一定要调用该方法来resolve这个钩子, 执行效果依赖该参数
- next() 进入管道中的下一个钩子，如果全部ok，则会跳转
- next(false) 中断当前的导航，如果URL改变了，那边URL地址会重置到from路由对应的地址
- next('/') 或 next({ path: '/' }) 跳到一个不同的地址
- next(error) (2.4.0+) 如果参数是一个 Error 实例，导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

应用：在每次跳转前检查token信息，如果过期，则跳转到登陆页面

router.beforeEach((to, from, next) => {
  if (window.localstorage.getItem('token')) {
    next();
  } else {
    next('/login');
  }
})

# 全局后置钩子 router.afterEach()

钩子和守卫不同的是，钩子没有next参数，跳转到新的页面后调用。

router.afterEach((to, from)=> {
  // 可以用来将滚动重置，如果一个页面比较长，滚动到某个位置，跳转到另一个页面，滚动默认在上一次停留的位置, 可以通过这个钩子，返回顶部
  window.scrollTo(0, 0)
})

# 全局解析守卫 router.beforeResolve()

2.5.0 新增

和router.beforeEach类似，区别是在导航被确认之前，且所有组件内守卫何异步路由组件被解析之后，解析守卫才被调用，在 router.afterEach() 之前

# 路由独享的守卫 beforeEnter()

// 可以在定义路由时，单独为某个路由设置守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

# 组件内的守卫 beforeRoute*()

可以在路由组件内直接定义下面的路由守卫

beforeRouteEnter() 在进入该组件前，this无法使用，组件实例还没被创建
beforeRouteUpdate() 2.2新增，路由改变，组件复用时调用
beforeRouteLeave() 导航离开该组件的对应路由时调用

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例，其他组件内的守卫无法通过回调来调用实例。直接用this就可以
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`

    // 可以用来在跳转下一页时确认提示
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}

# 完整的导航解析流程

1.导航被触发
2.失活的组件调用组件内的离开守卫 beforeRouteLeave()
3.调用全局的beforeEach() 守卫
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)
5.在路由配置里调用 beforeEnter()
6.解析异步路由组件
7.在激活的组件里调用 beforeRouteEnter()
8.全局调用beforeResolve() 守卫
9.导航被确认
10.调用全局的 afterEach 钩子
11.触发DOM更新
12.用创建好的组件实例，调用组件里 beforeRouteEnter 守卫中传给 next 的回调函数

# 路由元信息

定义路由的时候，可以配置meta字段，用途：在全局导航守卫中检查元字段，看是否需要检查权限

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

路由匹配到的路由记录会存放到 $route.matched 数组，通过获取对应的meta字段来进行校验

router.beforeEach((to, from, next) => {

  // .some() 对数组的每一项运行给定函数, 如果函数对数组的任一项返回的true，return true
  if (to.matched.some(record => record.meta.requiresAuth)) {

    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

# 过渡效果

RouterView 是基本的动态组件，所以我们可以用 transition 组件给它添加一些过渡效果

<transition>
  <router-view></router-view>
</transition>

# 单个路由的过渡

上面的用法为每个组件都设置了一样的过渡效果，如果想让每个组件有不同的过渡效果，可以在各路由组件内使用 transition 设置不同的name

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

# 基于路由的动态过渡

可以根据当前路由与目标路由的变化关系，动态设置过渡效果，完整示例 (opens new window)

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

<script>
  // 在父组件内，watch $route，决定使用哪种过渡
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
</script>

# 数据获取

进入某个路由，需要从服务器获取数据，有两种方式实现

导航完成后获取，先完成导航，在接下来的组件生命钩子中获取数据，数据获取期间显示 ‘加载中’之类的提示
导航完成前获取, 导航完成前，在路由进入的守卫中获取数据，数据获取成功后执行导航

# 导航完成后获取数据

<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>
<script>
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
        }
      })
    }
  }
}
</script>

# 导航完成前获取数据

在导航到新的路由前获取数据。在to的组件的 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
      }
    }
  }
}

# 滚动行为

当切换到新的路由，想要页面滚到顶部，或者保持原先的滚动位置，就像重新加载页面一样，vue-router支持在路由切换时，定义页面如何滚动 , 该功能只支持在history.pushState的浏览器中可用

创建Router实例时，可以提供scrollBehavior方法，返回值格式:

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

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

    // 示例1
    return { x: 0, y: 0 }

    // 示例2
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }

    // 示例3 模拟“滚动到锚点”的行为
    if (to.hash) {
      return {
        selector: to.hash
      }
    }
  }
})

使用路由元信息，更细粒度的控制滚动, 完整示例 (opens new window)

# 异步滚动 2.8.0新增

scrollBehavior可以返回一个Promise

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

# 路由懒加载

打包构建应用时，js包会变的比较大，影响页面加载。可以把不同的路由对应的组件分割成不同的代码块，当路由被访问时才加载对应的组件。

结合Vue的异步组件 + Webpack的代码分割功能，可以轻松实现路由懒加载

1.将异步组件定义为一个Promise工厂函数

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

2.在webpack中，使用动态import语法来定义代码分块点

import('./Foo.vue') // 返回Promise

如果使用的是Babel，需要添加 syntax-dynamic-import 插件，Babel 才能正确地解析语法。

结合上面的两者，就是如何定义一个能被Webpack自动代码分割的异步组件

const Foo = () => import('./Foo.vue')

# 使用注释将组件按组分块

如果想把某个路由下的所有组件都打包在同个异步块中，需要特殊的注释语法提供块名称 (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')

# TODO

完整API (opens new window) 整理

router-link 属性
- tag 使用 tag 属性指定标签名，依旧会监听点击，触发导航。
```
<router-link to="/foo" tag="li">foo</router-link>

<li>foo</li>
```
- active-class, 设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。默认值为 "router-link-active"

# 整合第三方路由

第三方路由这里暂不讨论，参考第三方路由 (opens new window)

← 过滤器 Vuex 状态管理 →