前言

本文将从5个方面介绍vue-router的基础知识：vue-router简介、如何使用路由、路由跳转页面的方式、路由的分类、路由传参。

1 Vue-Router 简介

vue-router：路由管理器。

作用：

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

上面的内容引自官方文档，将来搞清楚了会补充解释一下

2 如何使用路由

【1】在/src/router/index.js中引入vue和路由vue-router，并用全局方法Vue.use()方法注册路由。

【2】new一个路由实例，对象作为Router构造函数的参数。

【3】将要跳转页面涉及到的组件引入index.js，配置作为函数参数对象的属性routes。

【4】将路由实例作为默认值导出。

【5】在main.js中引入/src/router/index.js，将router注册到的vue实例的属性中。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3 路由跳转页面的方式

路由文件配置项中routes中，name属性和path属性尤为重要。

配置好路由信息之后，就来看下路由如何跳转。路由跳转有以下几种方式：

【1】直接修改地址栏，就会跳转到路由文件中配置好的组件页面，关联的是path属性

【2】在页面中点击路由跳转链接，也会跳转到路由文件中配置好的组件页面

<router-link to="/foo">Go to Foo</router-link>

【3】在代码逻辑中跳转，也会跳转到路由文件中配置好的组件页面

4 路由的分类

根据切换路由时是否跳转页面来分：

• 跳转页面的路由
  • 普通路由
  • 重定向路由
• 不跳转页面的路由
  • 动态路由
  • 嵌套路由
    • 动态路由 + 子路由

未完待续