学习vue-router？看这篇就够了——入门

一、简介

本文github地址，base分支
在我们使用Vue.js构建单页面应用时，必不可少的要使用到路由，但Vue.js本地不自具备，这时候vue-router就诞生了。那什么是路由呢？其实它类似我们常使用的“路由器”功能，对地址进行分发。根据地址栏不同的内容来指定到不同的页面。

一、安装与使用

本文将使用vue-cli快速搭建一个基于vue.js项目。

1. 安装

这里注意，我没有默认安装vue-router，各位小伙伴可以在install vue-router的时候选择yes。

2. 注册使用

1） 新建路由文件

在src目录下新建router文件夹并新建router.js文件,说明，vue-router是一个插件，要使用时要Vue.use(),在routes数组中为一个一个具体的路由配置选项。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: []
})

2） 在vue.js中使用路由

在main.js文件中

import Vue from 'vue'
import App from './App'
import router from './router/router.js'  //引入路由规则

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,//使用路由
  template: '<App/>',
  components: { App }
})