1.引入Roulter

npm install vue-router —save

2.创建组件

路由组件一般放在views或pages包下
非路由组件一般放在components包下

创建两个测试用的路由组件

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70

3.创建路由器

路由器一般专门定义一个包，如：可放在名为router的包下

利用js创建路由器，将上面创建的路由组件引入路由器

/*
路由器模块
 */
import Vue from  "vue"
import VueRouter from "vue-router"
import About from "../views/About.vue"  //路由组件
import Home from "../views/Home.vue"    //路由组件
Vue.use(VueRouter)
export default new VueRouter({//向外暴露路由器对象
  //配置N个路由
  routes:[
    {
      path:"/about",
      component:About
    },
    {
      path:"/home",
      component:Home
    },
    {
      path:"/",//默认打开的路由组件
      redirect:"/about"//重定向到about
    }
  ]
})

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 1

4.配置路由器

上面已经创建的路由组件与路由器，现在我们需要将路由器配置到VUE中

在入口js(main.js)中进行配置

import Vue from 'vue';
import App from './App.vue';
import router from "./router"  //引入路由器
new Vue({//配置对象的属性名都是一些固定的名称，不可随便修改
  el:"#app",
  components:{App},
  template:"<App/>",
  router:router  //配置路由器
})

5.使用路由

在页面中通过路由来使用路由组件，

在这个demo中我在App.vue中使用了路由

<template>
  <div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home"  class="list-group-item" >Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
          <div class="panel">
              <div class="panel-body">
                 <router-view></router-view>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {// 向外默认暴露一个出口(对象)
  };
</script>
<style>
</style>