Vue Router 使用感受

发布于 2020-06-21  63 次阅读


Vuejs.org

前言

自从我入前端的坑,我一直使用的都是 Vue.js,理所当然的,我就了解到了 Vue Router。
本文将概括性地讲述我在使用的过程中遇到的一些使用感受,仅代表我自己的观点。

What's Vue Router?

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

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

Why Vue Router?

我使用的是 hash 模式。该模式通过在 URL 后加入 hash 达到路由的效果,在 HTTP 请求时,hash 并不会包括在请求 URL 内。因此通常被用来在页面中定位一些内容。

配置路由

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: { name: 'Post' }
  },
  {
    path: '/:pasteid(.{24})',
    redirect: to => {
      const { params } = to;
      return { name: 'Viewer', params: { pasteId: params.pasteid } };
    }
  },
  {
    path: '/post',
    name: 'Post',
    component: () => import('../views/Post.vue')
  },
  {
    path: '/search',
    name: 'Search',
    component: () => import('../views/Search.vue')
  },
  {
    path: '/view/:pasteId',
    name: 'Viewer',
    component: () => import('../views/Viewer.vue')
  },
  {
    path: '*',
    redirect: { name: 'Search' }
  }
]

const router = new VueRouter({
  routes
})

export default router

:pasteId 表示一个参数,包括在 Vue 子组件内的 this.$route.params 中。值得一提的是,Vue Router 使用 path-to-regexp 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配

path 的 () 内的内容为正则,修饰括号前的 param。当然也可以直接作为 path 的一部分。

在这个例子中,我使用了动态的方式加载组件。在这里我引用 @GPlane 大佬的话解释一下:

静态、动态 import 的概念在整个前端都是适用的,与 Vue 和 Vue Router 没什么关系。

放在顶部的静态import,也就是不管有没有访问这个页面,这个组件都会被加载;像“函数调用”一样地使用 import(本质上并不是函数调用)是动态 import,这里导入的组件会被 webpack 拆分单独一个 chunk(我不知道该怎样翻译……),等到真正访问这个路由的时候才会加载这个组件。
静态 import 适用于比较小的组件,因为拆分一个 chunk 后访问时会消耗一次 HTTP 请求;而大的组件就可以考虑使用动态 import,这样可以避免直接加载的大组件。

两种 import 方式的意义和作用是不同的。

路由导航

我使用的都是编程式导航,也就是 this.$router.push() 方法。

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 对象
router.push({ name: "Search" })
// 命名的路由 + params
router.push({ name: 'Viewer', params: { pasteId: 'xxx' }})

重定向和别名

重定向

(我自己的实例)

const routes = [
  {
    path: '/',
    redirect: { name: 'Post' }
  },
  {
    path: '/:pasteid(.{24})',
    redirect: to => {
      const { params } = to;
      return { name: 'Viewer', params: { pasteId: params.pasteid } };
    }
  }
]

在此例的第二个中,演示了动态返回重定向目标,算是比较复杂的了。当然,通常情况下,你只要使用第一个就行啦。

别名

(以下选自官方文档)

“重定向”的意思是,当用户访问 /a 时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

上面对应的路由配置为:

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

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

最后

更多的功能和示例请前往 Vue Router 中文文档 查看。