vue-router学习

以下只是我最近的学习总结，可能不是很详细。

vue-router中文API
对vue-router的一个浅显的认识： vue-router即vue路由，基本功能就是点击相关按钮或元素，在特定区域显示对应的内容。相当于dom中的显示与隐藏。

路由实现

• 安装vue-router
  因为最近是根据视频上面搭建饿了么App，我直接使用的npm安装时，vue-router的版本是最新的，所以在敲的时候跟视频上面是会有一些不同的。但这也是一个学习的过程，通过自己查API和网上资料可以加深对一些技术的理解。
• main.js配置路由
  视频当中使用的vue-router是0.7.13版本，所以刚开始照着上面敲的时候总是出错，比如用到router.map的时候就会报错，router.map is not a function。这其实是vue-router2在vue-router1的基础上做的改变，删除了之前版本中的一些内容。在这里我是按照API上面的代码来写的，但是最后写出来仍然不能达到想要的效果。原因是API中的main.js中挂载app时没有 render: h => h(App)语句，加上之后就会出现效果（现在还不知道到底是为什么）。

/* eslint-disable */
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'

// 安装vue-router插件
Vue.use(VueRouter) // 注册路由

/* no-unused-vars */
// 2.定义路由
// 每个路由route应该映射一个组件
const routes = [
  // 这里的path '/'代表应用首页显示的内容
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings},
  {path: '/seller', component: seller}
]

// 3.创建router实例，然后传‘routes’配置，当然也可以传别的配置参数
// 创建router实例的作用是对路由进行管理
const router = new VueRouter({
  routes// 缩写，相当于routes:routes
})

// 4.创建和挂载根实例
// 配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
let app = new Vue({
  el:'#app',
  router,
  render: h => h(App)
})
// 现在应用已经可以启动了
Vue.use(app)

• App页面代码
  点击商品，商家，评论等组件， 区域中会出现对应的内容

<template>
  <div>
    <v-header></v-header>
    <div class="tab">
      <!--使用router-link组件来导航-->
      <!--通过传入'to'属性来指定链接-->
      <!--<router-link>默认会被渲染成一个a标签-->
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!--路由外链，路由匹配到的外链将匹配在这里-->
    <router-view></router-view>
  </div>
</template>

<script>
// 注册header组件
import header from './header/header.vue' // 引用
// import之后需要export一个
export default {
  components: {
    // 对header做一个注册，注册为v-header组件
    'v-header': header
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .tab
      display :flex
      width :100%
      height :40px
      line-height :40px
      .tab-item
        flex :1
        text-align :center
</style>

先这么多吧，后面学习之后再补充