LQ博客 www.lqblogs.com
arrows
nav

node 中间件正则模糊匹配实现vue histotry模式

作者:lq 来源:原创 发布时间:2019-08-09 浏览量:1838 评论:0 点赞:0

       本文章只对node 中间件正则模糊匹配实现vue histotry模式进行实例讲解,不对其他方法进行赘述。当然实现这一模式的方法有多种,但如果你使用了中间件,不妨参考下,看看对你是否有帮助呢?


思路逻辑:在Vue history开发模式下,利用node中间件来对外来访问路径进行正则模糊匹配,如果是Vue的请求路径则加载Vue打包的index.html页面,否则按正常逻辑走。


Vue 路由文件(router/index.js)

(注意:base设置必须与下面node路由匹配一致,同时还必须创建一个任意路由匹配页,防止由于找不到路由而报错,具体参照下面示例)

require('es6-promise').polyfill()
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)


import testOne from '../pages/testOne.vue'
import testTwo from '../pages/testTwo.vue'
import ErrorPage from '../../../components/errorPage.vue'

export default new Router({
  base: '/vue/test/',
  mode: 'history',
  routes: [
    {
      path: '/testOne',
      name: 'testOne',
      component: testOne,
    },
    {
      path: '/testTwo ',
      name: 'testTwo ',
      component: testTwo ,
    },
    {
      path: '*', //任意路由及结果页
      component: ErrorPage 
    }
  ],
  scrollBehavior (to, from, savedPosition){
    if(savedPosition){
      return savedPosition
    }else{
      return {x:0, y:0}
    }
  }
})

本文章用node express框架来做中间件的,通过路由正则模糊匹配来获取Vue打包后的index.html页面内容

(注意:用render方法获取结果页面内容,而不是其他的重定向或指向)

node express框架:http://www.expressjs.com.cn

//自己也可以对路由模块进行封装,具体根据项目需求场景来处理
// handler routes
app.get(/^\/vue\/test/, function(){
	render('/vue/static/index.html');
});


完成后的访问路径:localhost/vue/test/testOne

Vue node
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(0)
打赏
倒踩(0)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(1838)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章