从零开始的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")
    }
  ]

路由的其余主题

其余主题包括：

• 导航守卫
• 路由元信息
• 过渡动效
• 数据获取
• 滚动行为
• Router API

对于这些主题，感兴趣的能够再点击连接学习，根据2/8定律，不做为学习的重点，用到再看。

原文出处：https://www.cnblogs.com/huangmengke/p/11697295.html