以express为例:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var history = require('connect-history-api-fallback');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/',history());
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.listen(8000,function(){
console.log('启动成功');
})
module.exports = app;
如果路由配置了history模式,则需要引入connect-history-api-fallback包 调用如下命令
npm install --save connect-history-api-fallback
在public下新建一个文件夹order,把打包后的static文件夹和index.html放入order中,在vue router文件下的index.js中加入
base: '/order/',
router.js配置
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/store'
import home from '@/page/home'
import shopdetail from '@/page/shopdetail'
import shopcar from '@/page/shopcar'
import result from '@/page/result'
import login from '@/page/login'
import tab from '@/page/tab'
import message from '@/page/message'
import announce from '@/page/announce'
import announcedetail from '@/page/announcedetail'
import about from '@/page/about'
import orderDetail from '@/page/orderDetail'
import err from '@/page/err'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: '/order/',
routes: [
{
path:'/login',//登陆
name:'login',
component: login,
},
{
path: '/',//商品列表
name: 'home',
component: home,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/shopdetail',//商品详情
name:'shopdetail',
component: shopdetail,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/shopcar',//购物车
name:'shopcar',
component: shopcar,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/result',//结算
name:'result',
component: result,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/tab',//订单,地址,库存组件切换
name:'tab',
component: tab,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/message',//我的消息
name:'message',
component: message,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/announce',//公告
name:'announce',
component: announce,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/announcedetail',//公告详情
name:'announcedetail',
component: announcedetail,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/about',//联系我们
name:'about',
component: about,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'/orderDetail',//订单详情
name:'orderDetail',
component: orderDetail,
meta:{
requireAuth:true,//添加该字段,表示进入这个路由是需要登录的。
}
},
{
path:'*',//订单详情
name:'err',
component: err
},
]
})
if (window.sessionStorage.getItem('token')) {
store.commit('setkoken', window.sessionStorage.getItem('token'));
}
router.beforeEach((to,from,next)=>{
if(to.path === '/login'){
store.commit("setNav",'none');
}
if(to.meta.requireAuth){//判断该路由是否需要登录权限。
if(store.state.token){//通过vuex state获取当前的token是否存在。
store.commit("setNav",'block');
next();
}else{
next({
path:'/login',
query:{redirect:to.fullPath}//将跳转的路由path作为参数,登陆成功后跳转到该路由
})
}
}else{
next();
}
})
export default router;
完成。