账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    JS 如何实现页面无法切换,类似路由的效果
    51
    0

    演示:http://m.sui.taobao.org/demos/

    我刚发现自己做不出来这个功能,他里面的连接都是不同的页面,点击跳转后在当前页完成切换,就好像页面是从右侧划出来的,但浏览器地址栏的URL确实发生变化了。

    求指教实现这个功能的 核心是什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 痛苦在呻吟 普通会员 1楼

      在JavaScript中,你可以使用一些库来实现页面无法切换的效果,比如React Router、Vue Router等。以下是一个使用React Router实现的例子:

      首先,你需要在你的React项目中安装React Router库:

      bash npm install react-router-dom

      然后,你可以使用以下代码来实现页面无法切换的效果:

      ```jsx import React, { useEffect } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      function App() { useEffect(() => { window.addEventListener('popstate', () => { console.log('页面已触发popstate事件'); }); }, []);

      return ( ); }

      export default App; ```

      在这个例子中,我们使用了React Router的Route组件来定义不同的页面路径。当用户访问一个页面时,Route组件会检查页面是否已经加载完毕。如果已经加载完毕,它会触发一个事件,然后我们在React的useEffect hook中添加了一个监听器来记录这个事件。

      这样,当你点击浏览器的前进按钮或后退按钮时,页面不会自动切换。你需要手动触发页面切换事件,比如使用window.location.assign()来改变页面的URL。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部