Vue.js系列之vue-router(上)(3)

npm install vue-router 

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 

<template> 
  <div class="footer"> 
    <div class="readType" v-if="readType.count">{{readType.count}}</div> 
    <ul class="main-nav"> 
      <li> 
        <router-link to="/home"> 
          <i class="icon-nav icon-nav1"></i><span>首页</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/quan" v-bind:class="{rrouter:activ}"> 
          <i class="icon-nav icon-nav2"></i><span>学友圈</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/friend"> 
          <i class="icon-nav icon-nav3"></i><span>学友</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/find"> 
          <i class="icon-nav icon-nav4"></i><span>发现</span> 
        </router-link> 
      </li> 
      <li> 
        <router-link to="/mine"> 
          <i class="icon-nav icon-nav5"></i><span>我的</span> 
        </router-link> 
      </li> 
    </ul> 
  </div> 
</template> 

<template> 
 <div id="app"> 
  <router-view></router-view> 
 </div> 
</template> 

// 0. 如果使用模块化机制编程，进入Vue和VueRouter，要调用 Vue.use(VueRouter) 
import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
// 1. 定义（路由）组件。 
// 可以从其他文件 import 进来，我们一般都是建好了组件再来写路由的 
// 所以就会有好多这样的语句。 
import home form "./components/home" 
import login form "./components/login" 
// 2. 定义路由 
 routes: [ //这里跟1.x有挺大区别，有接触的自己看清楚哦 
  { 
   path: '/',  //浏览器网路请求走通之后默认就会去找域名下的根目录， 
   name: 'home', //所以我们就把这个组件作为默认首页 
   component: home 
  }, 
  { 
   path: '/login', 
   name: 'login', 
   component: login 
  } 
  ] 
// 3. 创建 router 实例，然后传 `routes` 配置 
// 你还可以传别的配置参数, 不过先这么简单着吧。 
const router = new VueRouter({   //你就当const是var 
 routes 
//（缩写）相当于 routes: routes 
}) 
// 4. 创建和挂载根实例。 
// 记得要通过 router 配置参数注入路由， 
// 从而让整个应用都有路由功能 
const app = new Vue({ 
 router 
}).$mount('#app') 
// 现在，应用已经启动了！