Fork me on GitHub

一个简单的Vue路由指南

发表于 | 分类于 |
字数统计: 1k | 阅读时长 ≈ 3 min

vue-router

路由模式

hash模式

使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

  • 原理

    基于浏览器的window.onhashchange事件，当地址变化时，通过window.location.hash 获取地址上的hash值；并通过构造Router类，配置routes对象设置hash值与对应的组件内容。

  • 优点

    hash值不会被包含在Http请求中, 因此hash值改变不会重新加载页面；

    hash改变会触发onhashchange事件, 能控制浏览器的前进后退；

    兼容性好；

  • 缺点

    地址栏中携带#不美观；

    hash有体积限制，只可添加短字符串；

    当设置的新值必须与原来不一样才会触发hashchange事件；

history模式

用url规范的路由，但跳转时也不会刷新页面。依赖 HTML5 History API 和服务器配置。

  • 原理

    基于HTML5新增的history.pushState()和history.replaceState()两个api（改变url不刷新页面），以及浏览器的window.onpopstate事件（用来监听前进或后退事件），地址变化时，通过window.location.pathname找到对应的组件。并通过构造Router类，配置routes对象设置pathname值与对应的组件内容。

    PS: 调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件。

  • 优点

    pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；

    pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；

    浏览器的进后退能触发浏览器的onpopstate事件，获取window.location.pathname来控制页面的变化；

  • 缺点

    URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器，所以前端的 URL 必须和实际向后端发起请求的 URL 一致。需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面；

    兼容性差，特定浏览器支持；

  • 后端配置例子

    HTML5 History 模式

abstract

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

响应路由

当使用路由参数时，例如从 /user/id1 导航到 /user/id2，原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。
此时可以监听路由的变化：

1
2
3
4
5
6
7
8
const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

导航守卫（beforeRouteUpdate）

1.全局前置守卫

1
2
3
4
5
6
7
8
9
10
const router = new VueRouter({ ... })

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

//全局后置钩子
router.afterEach((to, from) => {
  // ...
})

2.全局解析守卫
可以使用router.beforeResolve注册一个全局守卫，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3.路由独享的守卫

1
2
3
4
5
6
7
8
9
10
11
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4.组件内的守卫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

5.完整的导航解析流程
失活组件beforeRouteLeave -> beforeEach -> 重用组件beforeRouteUpdate -> 路由beforeEnter -> 激活组件beforeRouteEnter -> beforeResolve -> afterEach -> DOM更新

参考

Vue Router

原来这就是hash模式和history模式的区别

-------------完结撒花 -------------