前言

今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录

 Vue Router是什么

Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SPA)。地址栏url的变化并不会去发请求去服务器取新的页面,而是按需加载局部组件,看起来就像无刷新一样。包括的功能包括:

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

实际上路由的用途是用路由配置表来控制 url 对应的跳转地址,地址对应的可以是基础视图组件或者布局组件,可以用于灵活的视图导航。

安装

  • 直接下载 / CDN
    下载地址:https://unpkg.com/vue-router/dist/vue-router.js
    然后通过js引入进来:

      <script src="/path/to/vue.js"></script>
      <script src="/path/to/vue-router.js"></script>
  • NPM

    安装npm包:

      npm install vue-router

    然后通过Vue.use()引入:

      import Vue from 'vue'
      import VueRouter from 'vue-router'
    
      Vue.use(VueRouter)

基本用法

Vue Router的API和Vuex类似,new VueRouter 构建出一个路由实例,然后提供了<router-link> 组件用于写链接,<router-view> 组件用于展示,Router的构建选项中最重要的就是 routes ,它用来定义路由的规则。

一个简单的路由例子:

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
  // 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

  // 1. 定义 (路由) 组件。
  // 可以从其他文件 import 进来
  const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }

  // 2. 定义路由
  // 每个路由应该映射一个组件。 其中"component" 可以是
  // 通过 Vue.extend() 创建的组件构造器,
  // 或者,只是一个组件配置对象。
  // 我们晚点再讨论嵌套路由。
  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]

  // 3. 创建 router 实例,然后传 `routes` 配置
  // 你还可以传别的配置参数, 不过先这么简单着吧。
  const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })

  // 4. 创建和挂载根实例。
  // 记得要通过 router 配置参数注入路由,
  // 从而让整个应用都有路由功能
  const app = new Vue({
    router
  }).$mount('#app')

  // 现在,应用已经启动了!

动态路由

通过使用:动态路径参数来做动态路由,使用通配符 (*)来匹配任意路径,作为捕获任意路径和404路径。详细请参考:链接地址

嵌套路由

路由是支持嵌套的,routes中的 children 配置用来写嵌套路由配置,然后嵌套的路由可以在组件的 <router-view> 做嵌套展示。

编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。主要采用router.push(location, onComplete?, onAbort?)这个方法,另外还提供了router.replace(location, onComplete?, onAbort?)router.go(n)这两个不常用的方法,具体用法参考:链接地址

命名路由

除了直接用 path 指定路由的路径外,可以用 name 给路由取一个别名方便使用,具体参考:链接

命名视图

可以给视图也取名字方便使用, router-view 组件的 name 属性指定,不给的话默认为 default 名字的。

重定向和别名

重定向也是通过 routes 配置来完成,配置采用 redirect 。例子:

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

别名采用 alias 来命名。

路由组件传参

使用 props 将组件和路由解耦,让路由可以传参数给组件,达到动态配置目的。例子:

  const User = {
  props: ['id'],
    template: '<div>User {{ id }}</div>'
  }
  const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User, props: true },

      // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
      {
        path: '/user/:id',
        components: { default: User, sidebar: Sidebar },
        props: { default: true, sidebar: false }
      }
    ]
  })

props 可以是布尔、对象和函数,具体用法参考:链接地址

HTML5 History 模式

vue-router 默认 hash 模式 ,会让url地址里面带有#符号,非常丑陋而且让锚点语法无法使用,所以需要 history 模式,例子:

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

路由懒加载

结合 Vue异步组件Webpack 的代码分割功能,轻松实现路由组件的懒加载(路由被访问的时候才加载对应组件)。例子:

  routes: [
    {
      path: "/user",
      component: () =>
        import(/* webpackChunkName: "layout" */ "./layouts/UserLayout")
    }
  ]

路由的其他主题

其他主题包括:

对于这些主题,感兴趣的可以再点击链接学习,根据2/8定律,不作为学习的重点,用到再看。

02-12 02:57