JQ如何实现类似vue react的路由跳转功能?

KenOscar
  • 847

clipboard.png
使用react vue之后 我们需要把页面布局写好 然后给一个router-view的出口 作为路由渲染页面 就可以实现 左侧导航固定的情况下 跳转到导航里的栏目页

如果用JQ 写这样一个系统 如何实现这样的功能 总不能用《a href》 或者iframe实现跳转吧

有没有什么比较好的架子 或者实例 纯静态的 不需要后台部署生成的那种

不需要每个页面都写侧边栏 跟顶部

回复
阅读 1.9k
5 个回答

pushstate, replacestate,然后监听popstate

1.ajax载入内容
2.修改url

路由插件demo.代码
之前曾经用jq 尝试写过SPA 借用了layui,现在把layUI去掉了,可以用,但是没有封装,试过了好用
思路是点击左侧菜单a标签先进行拦截,判断是spa跳转还是外链跳转
重点是window.location.hashjq.load

图片描述

思路:

  1. window.location.hash 获取#后面对应的路由名称
  2. 页面写对应的逻辑,类似vue路由的定义就有 path: 'user' components: important('/page/user.vue')
  3. .vue文件是通过vue-loader将文件解析为html, css, js三部分,如果要实现这种方式需要使用webpack,并且自己实现对应的解析loader
  4. 直接使用js实现html的渲染,比如根节点为<div id="app">, 获取到这个根节点,根据不同的路由,设置app.innerHtml

最后:

 简单的思路是这样的,但是实际vue结合webpack实现了许多东西,路由的router-view和router-link组件,懒加载,vue-loader的解析,style1的scoped命名空间等
zkaip
  • 4
新手上路,请多包涵

监听点击链接,修改 history, 手动载入新的页面

你知道吗?

宣传栏