2021-03-12页面内部选项卡切换改变路由还要不刷新

今天重构M站的时候，需要在当前页面有一个Nav组件，切换nav的同时展示不同数据列表，页面不刷新但路由还要切换。有两个办法

一：## 利用window.location.hash=’/${url}’

利用哈希路由的方式可以切换路由不刷新，但是路由会有‘#’字符，一般公司都会要求不要#，那这个时候应该怎么办呢，我求助了一下公司大佬，得到了新的方法。

二：利用handle = app.getRequestHandler();

我这个项目用的是next.js，这个跳转问题找的大佬帮忙解决的，他是这样写的。。
这是server.js页面

const express = require('express');
const chalk = require('chalk');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 7051;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const routerHandler = (...params) => {
  const [server, path, as, reqToQuery] = params;
  server.get(path, (req, res) => {
    return app.render(req, res, as, reqToQuery(req));
    //res  就是路由给你返回的你的地址，as就是主地址  
  });
};

app.prepare().then(() => {
  const server = express();
  //可以写多个routerHandler
  routerHandler(server, '/sxh/college', '/sxh', req => ({
    ...req.query,
    type: 'college'
  }));
  routerHandler(server, '/sxh/area', '/sxh', req => ({
    ...req.query,
    type: 'area'
  }));
  routerHandler(server, '/sxh/industry', '/sxh', req => ({
    ...req.query,
    type: 'industry'
  }));

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(
      `${chalk.green(`> Ready on http://（这里写运行的本地地址）:${port}`)}`
    );
  });
});

这个方法应该是next自带的方法吧，大佬和我讲了一遍，但我没听懂。。

代码页面

import { useRouter } from 'next/router';
  const router = useRouter();
router.push('/sxh', `/sxh/${url}`);

记录到这，有时间我再重新编辑一下