vue.js 2.0版本 —学习vue router demo

1.学习vue router

https://router.vuejs.org/zh/

2.创建目录

vue项目src/component目录下创建：
├── goods                         //商品文件夹
│    ├──goods.vue               
├── ratings                         //评论文件夹
│    ├──ratings.vue               
├── seller                         //商家文件夹
│    ├──seller.vue

3.编写goods.vue,ratings.vue,seller.vue代码

• goods.vue添加内容如下

<template>
  <div class="goods">
    this is goods
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'goods',
  data () {
    return {
      msg: 'Welcome to this is goods'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

• ratings.vue添加内容如下

<template>
  <div class="ratings">
    this is ratings
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'ratings',
  data () {
    return {
      msg: 'Welcome to this is ratings'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

• seller.vue添加内容如下

<template>
  <div class="seller">
    this is seller
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'seller',
  data () {
    return {
      msg: 'Welcome to this is seller'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

3.修改相关vue文件

• app.vue修改如下

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

<script>
import AppVheader from '@/components/header/head'
import AppTab from '@/components/tab/tab'

export default {
  name: 'App',
  components: {
    AppVheader,
    AppTab
  }

}
</script>

<style>
</style>

• tab.vue文件的修改

<template>
  <div class="tab">
    <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>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'tab',
  data () {
    return {
      msg: 'Welcome to this is tab'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .tab
       display:flex
       width:100%
       height:40px
       line-heigth:40px
       .tab-item
         flex:1
         text-align:center
         & > a
            display:block
            text-decoration:none
            font-size:14px
            color:rgb(77,85,93)
            &.active
             color:rgb(240,20,20)

</style>

4.修改src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Header from '@/components/header/head'
import Goods from '@/components/goods/goods'
import ratings from '@/components/ratings/ratings'
import seller from '@/components/seller/seller'

Vue.use(Router)

export default new Router({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      redirect: '/goods'
    }, // 默认就跳转此页面
    {
      path: '/header',
      name: 'header',
      component: Header
    },
    {
      path: '/goods',
      name: 'goods',
      component: Goods
    },
    {
      path: '/seller',
      name: 'seller',
      component: seller
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratings
    }

  ]
})

总结

• 注意的地下如下

  1.进入默认页面的设置，这个在src/router/index.jskh中new Router里routes属性中添加
   2.vue-router中a标签选中的默认的class是router-link-active，将这个class名称变成自己的相要的名字，则需要在src/router/index.js中的new  Router添加一个属性   linkActiveClass: 'active'