VUE进阶笔记(4) - （vue-router）+( express-router )

(一)

(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: '',
  components: { App, Goods, Ratings, Seller }
}).$mount('#app2');

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

app.vue







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

index.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);