(一)
(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);
网友评论