Vue Router 使用步骤 （Vue2.x）

使用步骤

• 当我们使用 vue/cli 创建项目的时候选择上Router，会自动安装 Vue Router 插件，并且生成 Vue Router 的基础代码结构

• 注册路由 Vue.use 是用来注册插件，它需要接收一个参数，它会调用传入对象的 install 方法

  Vue.use(Router) 
  

• 路由规则

  const routes = [
  {
    path:'',
    name:'',
    component:''
  },
  ]
  

• 创建路由对象 （创建路由时把路由规则传进来）

  const router = new VueRouter({routes})
  

• 导出路由对象

  export default router
  

• 注册 router 对象，在 main.js 中导入创建好的router，然后在创建 Vue 实例的过程中注册 router 对象

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  
  Vue.config.productionTip = false
  
  new Vue({
    // 3. 注册 router 对象
    router,
    render: h => h(App)
  }).$mount('#app')
  

  在创建 Vue 实例的时候如果我们配置路由选项（注册 router 对象），此时会给 Vue 实例注入两个属性 router（路由对象），我们通过路由对象可以调用一些相应的方法 proto（如：push、back、go 等等）也可以通过 currentRoute查看当前路由规则。

• 创建路由组件占位符 在 App.vue 中我们会创建一个 <router-view/> 作为组件的占位符，当路径匹配到一个组件之后会把这个组件加载进来并且替换掉 <router-view/>

• 通过router-link创建链接