VueJS基础系列：使用vue-router

vue-router的作用：

vuejs官方路由管理器，可以用来实现单页应用里，配合tab选项卡切换显示不同页面内容。

官方中文手册：

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

vue-router在项目中的使用：

1、如果项目中没有vue-router，需要自己添加上去，在项目中的package.json文件中添加依赖：

2、命令行下载安装

cnpm install vue-router
//进入到项目文件夹，再重新跑一下代码
cnpm run dev

3、在项目中使用：

需要在入口文件main.js中注册一下（入口文件的主要作用是初始化vue实例并使用需要的插件）：

import时写的是,'vue-router'，这点可以去看在node_modules文件夹下的vue-router下的package.json，里面规定好了：

实际上我这里创建的项目test-project是自带了vue-router的，项目原先是这样：

与tab选项卡结合：

1、在App.vue中定义基础选项卡：

2、根据手册

修改App.vue：

<template>
  <div id="app">
    <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>
    //切换选项卡后刷新的区域   
    <router-view></router-view>

  </div>

</template>

在router/index.js中进行参数配置：

import Vue from 'vue';
import Router from 'vue-router';

import goods from '../components/goods/goods.vue';
import ratings from '../components/ratings/ratings.vue';
import seller from '../components/seller/seller.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/'
    },
    {
      //  链接路径
      path: '/goods',
      //  路由名称，可以在router-link和router.push()中使用
      name: 'goods',
      //  对应的组件模板
      component: goods
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },
    {
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]

});

分别创建组件模板components/goods/goods.vue、components/ratings/ratings.vue、components/seller/seller.vue，其中goods.vue内容如下：

<template>
  <div>
    我是商品
  </div>

</template>

<script>
export default {
}
</script>

<style lang="stylus" type="stylesheet/stylus">
</style>

效果图：

点击不同选项卡显示不同组件内容。上面router/index.js中：

import goods from '../components/goods/goods.vue';
import ratings from '../components/ratings/ratings.vue';
import seller from '../components/seller/seller.vue';

使用的是相对路径，可以在build/webpack.base.conf.js中进行设置，实现引入components目录下的文件时，只需要写components就可以自动定位到src/components

import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue'; 

设置如下： 

修改完设置之后，router/index.js：

import Vue from 'vue';
import Router from 'vue-router';

import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/'
    },
    {
      //  链接路径
      path: '/goods',
      //  路由名称，可以在router-link和router.push()中使用
      name: 'goods',
      //  对应的组件模板
      component: goods
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },
    {
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]

});

需要重启一下项目，命令行：cnpm run dev

接下来需要设置当点击不同选项卡时，被点击选项卡有不同颜色。当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，我们可以直接通过此类名设置样式达到目的。

也可以通过设置，将类名router-link-active改成自定义类名。

在实例化vue-router时，进行配置，修改router/index.js：

import Vue from 'vue';
import Router from 'vue-router';

import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';

Vue.use(Router);

export default new Router({
  linkActiveClass: 'active',
  routes: [
    {
      path: '/'
    },
    {
      //  链接路径
      path: '/goods',
      //  路由名称，可以在router-link和router.push()中使用
      name: 'goods',
      //  对应的组件模板
      component: goods
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },
    {
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]

});

将默认类名  .router-link-active更改成 .active，通过类名添加对应样式就行

设置默认路由，访问localhost:8080自动显示商品页面，修改router/index.js：