从零开始的vue学习笔记（八）

前言

今天花一天时间阅读完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定律，不作为学习的重点，用到再看。