【Vue实战之路】二、路由使用基础，六步搞定Vue-router

vue-router的出现是为了解决路由与视图（实际项目中的单文件组件）的对应关系。若单单为了实现交互时对相应组件的渲染，则通过vue的基础操作完全可以实现，那么为什么要是用vue-router呢，个人理解为以下几点，其实也就是vue-router的特点。

1.最显著就是无需刷新页面，完成跳转。资源预加载。

2.高效完成大型项目中多层的路由嵌套

3.完美兼容history、hash、abstract路由模式

4.支持重定向

5.支持编程式操作（存在相应的实例方法对路由进行操作）

下面接着上一篇，vue-cli部署完成后，六部完成vue-router的基础操作：

一、安装vue-router包模块

npm install vue-router --save

二、引入包模块

在需要使用vue-router的文件里引入：

import VueRouter from 'vue-router'

三、为Vue注册插件

Vue.use(VueRouter)

四、创建vue-router实例

var router = new VueRouter({
  routes: [
        { path: '/', component: home }
]})

五、注入Vue配置参数

new Vue({
  el: '#app',
  router,  //注入vue-router
  template: '<App/>',
  components: { App }
})

六、添加路由组件的渲染位置

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- vue-router的组件渲染位置 -->
    <router-view></router-view>
  </div>
</template>

以上六步为vue-router配置的基本步骤，无论逻辑多复杂，万变不离其宗。即便遇到了问题，分此六步逐一排查就一定能找到问题所在。