(一)

(1) vue-router简单使用

官网：https://router.vuejs.org/zh-cn/essentials/getting-started.html


main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue';
import App from './App';
import Goods from './components/tab/goos.vue';
import Ratings from './components/tab/ratings.vue';
import Seller from './components/tab/seller.vue';

import Router from 'vue-router';

Vue.config.productionTip = false;

/* eslint-disable no-new */

Vue.use(Router);

const routes = [
  { path: '/goods', component: Goods },
  { path: '/ratings', component: Ratings },
  { path: '/seller', component: Seller }
];

const router = new Router({
  routes
});

new Vue({
  el: '#app1',
  router,
  template: '<App/>',
  components: { App, Goods, Ratings, Seller }
}).$mount('#app2');

----------------------------------------------------------------------------

app.vue


<template>
  <div id="app2">
    <Header1></Header1>

    <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>

<script type="text/ecmascript-6">
  import Header1 from './components/header/header.vue';

  export default {
    components: {
      Header1
    }
  };

</script>

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

index.html

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>sell</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="static/css/reset.css">
  </head>
  <body>
    <div id="app1"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(2) 选择默认路由：

router.push('/路由路径') 即


const router = new Router({     //const router
  routes
});

router.push('/路由路径');

(3) 选择项高亮属性： router-link-active

(4) 修改点击时的class的属性：( linkActiveClass )

const router = new Router({
    routes,
    linkActiveClass: 'active'   //原来的是router-lick-active
});

(二)

express-router

var express = require('express')

var app = express()
appData = require('../data.json');

var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;


var apiRoutes = express.Router();


apiRoutes.get('/seller', function( req, res) {
  res.json({
    errno:0,
    data:seller
  });
});

apiRoutes.get('/goods', function( req, res) {
  res.json({
    errno: 0,
    data: goods
  });
});

apiRoutes.get('/ratings', function( req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api',apiRoutes);